Apakah kod kesan khas Vue?

Vue.js ialah rangka kerja progresif untuk membina antara muka pengguna. Ia menggunakan beberapa kod kesan khas yang berguna untuk meningkatkan pengalaman pengguna. Dalam artikel ini, kami akan mempelajari beberapa kod kesan Vue yang berguna untuk membantu anda memilih yang paling sesuai daripada banyak kesan.

1. Kesan peralihan

Kesan peralihan boleh menjadikan beberapa elemen dalam aplikasi anda bertukar dengan lancar antara keadaan berbeza. Vue.js menyediakan satu set nama kelas peralihan terbina dalam untuk mencetuskan animasi peralihan apabila elemen dimasukkan, dikemas kini atau dipadamkan. Berikut ialah contoh mudah:

 
Hello, World!
 

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

Dalam kod di atas,fadeialah nama peralihan yang ditentukan.v-if="show"digunakan untuk mengawal penampilan dan kehilangan unsur. Kami menggunakan nama kelasfade-enter-activedanfade-leave-activeuntuk menentukan gaya bagi peralihan elemen. Pada masa yang sama, nama kelasfade-enterdanfade-leave-todigunakan untuk menentukan gaya bagi keadaan awal dan akhir elemen. Nama kelas ini digunakan secara automatik apabila elemen dimasukkan, dikemas kini atau dipadamkan. Nama kelas boleh disesuaikan, ia hanya perlu konsisten untuk menjalankan kesan peralihan.

2. Animasi laluan

Animasi laluan boleh meningkatkan pengalaman pengguna dan membuatkan pengguna merasakan bahawa interaksi mereka dalam aplikasi adalah lancar. Penghala Vue mempunyai API penukaran laluan kelas pertama, yang memudahkan kami melaksanakan beberapa kesan animasi asas. Berikut ialah contoh mudah:

.router-enter-active, .router-leave-active { transition: opacity 0.5s; } .router-enter, .router-leave-to { opacity: 0; position: absolute; width: 100%; transform: translateX(100%); }

Dalam kod di atas, kita boleh menggunakan nama kelas yang sama dengan peralihan untuk mencapai kesan penukaran laluan. Kita boleh menggunakanrouter-enterdanrouter-leave-tountuk meletakkan masuk dan keluar elemen dan menetapkan ketelusan kepada 0. Akhir sekali, gunakanrouter-enter-activedanrouter-leave-activeuntuk menentukan peralihan masuk dan keluar untuk elemen. Ini akan digunakan pada animasi yang memasuki atau meninggalkan halaman.

3. Kesan tetikus

Kesan tetikus boleh menarik perhatian pengguna dan menjadikan interaksi halaman lebih menarik. Vue.js boleh mencapai kesan ini menggunakan@mouseoverdan@mouseleavepengendali acara. Berikut ialah contoh mudah:

.box { position: relative; } .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .overlay { opacity: 0; transition: opacity 0.3s ease-in-out; } .box:hover .overlay { opacity: 1; }

Dalam kod di atas, kami menggunakan pengendali acara@mouseoverdan@mouseleaveuntuk mengawal penampilan dan kehilangan lapisan topeng. Untuk gaya lapisan topeng, kami menggunakan set warna latar belakang kepada hitam lut sinar. Akhir sekali, kami menggunakan atributopacityuntuk mengawal kesan pudar lapisan topeng pada tetikus.

4. Kesan paralaks menatal

Kesan paralaks menatal boleh meningkatkan perasaan pengguna dan menjadikan penggunaan halaman lebih menarik. Vue.js boleh menggunakan atributwindow.scrollYuntuk mencapai kesan ini. Berikut ialah contoh mudah:

.parallax { background-image: url(image.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; height: 100vh; transform-origin: center bottom; transform: translate3d(0, 0, 0); }

document.addEventListener("scroll", () => { const parallax = document.querySelector(".parallax"); parallax.style.transform = `translate3d(0, ${window.scrollY / 2}px, 0)`; });

Dalam kod di atas, kami mentakrifkan imej latar belakang menggunakan atributbackground-image. Kami juga menggunakan atributtransformdan atributtransform-originuntuk menentukan kesan animasi elemen. Akhir sekali, kami menggunakan atributwindow.scrollYuntuk mengawal kesan penatalan elemen.

Ringkasan

Dalam artikel ini, kami mempelajari beberapa kod kesan Vue yang berguna. Kod kesan khas ini boleh menjadikan aplikasi anda lebih dinamik dan meningkatkan pengalaman pengguna. Ia boleh digunakan di banyak tempat, seperti kesan peralihan, penukaran laluan, alih tetikus dan kesan paralaks tatal, dan banyak lagi. Apabila melaksanakan kod kesan khas ini, anda harus mengutamakan pengalaman pengguna daripada terlalu memfokuskan pada kerumitan kod.

Atas ialah kandungan terperinci Apakah kod kesan khas Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!