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 cafda773a3e42827d5d9338abf905240 Ia boleh diperkenalkan dalam komponen akar atau dalam komponen di mana animasi perlu ditambah.

Seterusnya, kita perlu menentukan gaya animasi peralihan dalam teg cafda773a3e42827d5d9338abf905240 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:

<template>
  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

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 300ff3b250bc578ac201dd5fb34a0004 kami menggunakan 975b587bf85a482ea10b0a28848e78a4 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 c9ccee2e6ea535a969eb3f532ad9fe89 Menambahkan kesan peralihan ketelusan daripada 0 kepada 1 apabila memasukkan dan memadam.

Akhir sekali, kami membalut teg cafda773a3e42827d5d9338abf905240 dalam komponen di mana kesan animasi perlu ditambah atau dalam komponen akar.

Menggunakan kod di atas, apabila kita menukar laluan dalam projek Vue, halaman tersebut akan mempunyai kesan peralihan fade-in dan fade-out.

Selain kesan fade in dan fade out, kami juga boleh melaksanakan kesan peralihan yang berbeza mengikut keperluan, seperti kesan gelongsor, kesan zum, dsb. Untuk operasi khusus, sila rujuk dokumentasi rasmi Vue.

Untuk meringkaskan, langkah-langkah untuk melaksanakan kesan animasi penukaran penghalaan ke hadapan dan ke belakang dalam projek Vue adalah seperti berikut:

1. Perkenalkan komponen peralihan Vue cafda773a3e42827d5d9338abf905240.
2. Tentukan gaya animasi peralihan dalam teg cafda773a3e42827d5d9338abf905240
3. Gunakan 975b587bf85a482ea10b0a28848e78a4 untuk memaparkan komponen yang sepadan dengan laluan semasa.
4. Tambah kesan peralihan yang berbeza mengikut keperluan anda.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kesan animasi penukaran penghalaan ke hadapan dan ke belakang dalam projek Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!