Bagaimana untuk melaksanakan kesan animasi penukaran penghalaan ke hadapan dan ke belakang dalam projek Vue?

Bagaimana untuk melaksanakan kesan animasi penukaran penghalaan ke hadapan dan ke belakang dalam projek Vue?

Dalam projek Vue, kami sering menggunakan Penghala Vue untuk menguruskan penghalaan. Apabila kami menukar laluan, penukaran halaman selesai serta-merta tanpa kesan peralihan. Jika kami ingin menambah beberapa kesan animasi pada penukaran halaman, kami boleh menggunakan sistem peralihan Vue.

Sistem peralihan Vue menyediakan cara mudah untuk menambah kesan peralihan apabila elemen dimasukkan atau dialih keluar. Kita boleh menggunakan ciri ini untuk menghidupkan penukaran penghalaan ke hadapan dan ke belakang.

Pertama, kami perlu memperkenalkan komponen peralihan Vue Ia boleh diperkenalkan dalam komponen akar atau dalam komponen di mana animasi perlu ditambah.

Seterusnya, kita perlu menentukan gaya animasi peralihan dalam teg Komponen peralihan Vue mempunyai nama kelas CSS berikut untuk digunakan:

• enter: keadaan permulaan semasa memasukkan, akan digunakan serta-merta sebelum memasukkan animasi
• enter-active: keadaan penamatan semasa memasukkan, akan dicetuskan apabila memasukkan animasi Digunakan selepas satu bingkai sehingga animasi sisipan selesai
• cuti: Keadaan permulaan semasa memadam, akan digunakan serta-merta sebelum memadamkan animasi
• leave-active: Keadaan penamatan semasa memadam, akan digunakan satu bingkai selepas animasi pemadaman adalah dicetuskan, sehingga Selesaikan animasi pemadaman

Berikut ialah contoh kod contoh kesan animasi:

Dalam kod di atas, kami menggunakan kesan peralihan bernama "fade" dan menggunakan mod "out-in". Ini bermakna apabila menukar laluan, mula-mula tinggalkan halaman lama dan kemudian masukkan halaman baharu.

Dalam teg kami menggunakan untuk memaparkan komponen yang sepadan dengan laluan semasa. Nama kelas CSS yang sepadan ditambah semasa masuk dan keluar.

Seterusnya, kami menentukan gaya animasi peralihan melalui teg