Cara menambah kesan pudar pada penghalaan Vue

Apabila aplikasi web menjadi lebih kompleks, rangka kerja bahagian hadapan semakin digunakan. Vue.js ialah salah satu rangka kerja JavaScript yang paling popular pada masa ini. Fungsi penghalaannya membolehkan pengguna melompat dengan lancar dalam aplikasi. Artikel ini akan memperkenalkan anda cara menambah kesan pudar pada penghalaan Vue untuk meningkatkan pengalaman pengguna.

Asas penghalaan Vue

Sebelum kita mula, kita perlu memahami beberapa pengetahuan asas tentang penghalaan Vue. Penghalaan Vue.js dilaksanakan melalui Penghala Vue. Selepas memasang Vue Router dalam projek dan memperkenalkannya, kami boleh menyediakan jadual penghalaan dan paparan penghalaan. Hubungan pemetaan antara laluan akses dan komponen yang sepadan ditakrifkan dalam jadual penghalaan. Dalam paparan penghalaan, komponen yang sepadan akan dipadankan mengikut laluan dan dipaparkan pada halaman.

Tambahkan kesan pudar

Dalam sesetengah kes, kami perlu menambahkan beberapa kesan visual pada halaman lompat untuk meningkatkan pengalaman pengguna. Salah satu kesan yang biasa digunakan ialah pudar. Melalui kesan pudar, pengguna boleh melompat ke halaman dengan lebih semula jadi.

Kita boleh menggunakan kesan peralihan Vue untuk mencapai kesan fade-in dan fade-out ini. Peralihan diterangkan dalam dokumentasi Vue.js sebagai "menambah peralihan apabila memasukkan/mengalih keluar elemen". Vue menyediakan pelbagai kesan peralihan, termasuk fade in dan fade out, penskalaan, putaran, dsb. Dalam artikel ini, kami akan memberi tumpuan kepada pelaksanaan kesan pudar.

1. Buat animasi CSS

Pertama, kita perlu mencipta animasi CSS. Kelebihan menggunakan animasi CSS ialah kod itu ringkas dan mudah diselenggara, dan tidak perlu bergantung pada perpustakaan atau pemalam pihak ketiga. Dalam CSS, kita boleh menambah kesan peralihan kepada elemen melalui atribut peralihan. Dalam contoh ini, kami akan menambah kesan pudar pada paparan penghalaan.

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

Dalam CSS ini, kami telah menambahkan sifat peralihan untuk keadaan elemen dalam dan pudar. Mula-mula, masa kesan peralihan ditetapkan kepada 0.5s (iaitu, tempoh kesan fade-in dan fade-out elemen), dan kemudian tetapan berbeza dibuat untuk kedua-dua keadaan apabila masuk dan keluar. Untuk keadaan masuk, kami menetapkan kelegapan lalai kepada 0, yang mewakili kesan fade-in yang telus untuk keadaan meninggalkan, kami menetapkan kelegapan kepada 0, yang mewakili kesan fade-out yang telus.

2. Tambahkan kelas pada paparan laluan

Dalam paparan laluan, kami akan menggunakan komponen terbina dalam untuk menentukan kesan pudar. Kita boleh menggunakan pemilih CSS untuk menetapkan nama kelas untuk

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

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

Dalam kod di atas, kami mentakrifkan komponen peralihan Atribut nama menentukan nama komponen, di sini kita namakan ia pudar. Atribut mod menentukan mod apabila masuk dan keluar Di sini kami menetapkannya kepada keluar masuk, menunjukkan mod keluar dahulu dan kemudian masuk. Akhir sekali, dalam CSS, kami menambah nama kelas yang sepadan untuk menambah kesan pudar pada .

Kesimpulan

Dalam artikel ini, kami menyediakan kaedah pelaksanaan mudah kesan lompatan lompatan Vue. Dengan menggunakan komponen terbina dalam Vue dan animasi CSS, kami boleh menambahkan kesan pudar pada laluan Vue dengan mudah untuk meningkatkan pengalaman pengguna. Saya harap artikel ini membantu anda dan boleh menambah beberapa idea baharu pada pembangunan Vue anda.

Atas ialah kandungan terperinci Cara menambah kesan pudar pada penghalaan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!