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:

<transition name="fade">
  <div v-if="show">Hello, World!</div>
</transition>

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

Dalam kod di atas, fade ialah nama peralihan yang ditentukan. v-if="show" digunakan untuk mengawal penampilan dan kehilangan unsur. Kami menggunakan nama kelas fade-enter-active dan fade-leave-active untuk menentukan gaya bagi peralihan elemen. Pada masa yang sama, nama kelas fade-enter dan fade-leave-to digunakan 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-view class="view"></router-view>

.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 menggunakan router-enter dan router-leave-to untuk meletakkan masuk dan keluar elemen dan menetapkan ketelusan kepada 0. Akhir sekali, gunakan router-enter-active dan router-leave-active untuk 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 @mouseover dan @mouseleave pengendali acara. Berikut ialah contoh mudah:

<div class="box" @mouseover="hover = true" @mouseleave="hover = false">
  <div v-if="hover" class="overlay"></div>
  <img src="image.jpg">
</div>

.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 @mouseover dan @mouseleave untuk mengawal penampilan dan kehilangan lapisan topeng. Untuk gaya lapisan topeng, kami menggunakan set warna latar belakang kepada hitam lut sinar. Akhir sekali, kami menggunakan atribut opacity untuk 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 atribut window.scrollY untuk mencapai kesan ini. Berikut ialah contoh mudah:

<div class="parallax"></div>

.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 atribut background-image. Kami juga menggunakan atribut transform dan atribut transform-origin untuk menentukan kesan animasi elemen. Akhir sekali, kami menggunakan atribut window.scrollY untuk 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!