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:

<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 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

Akhir sekali, kami membalut teg 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 .
2. Tentukan gaya animasi peralihan dalam teg
3. Gunakan 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!