Tutorial Asas VUE3: Menggunakan peralihan dan animasi Vue.js

Vue.js ialah rangka kerja progresif untuk membina antara muka pengguna, di mana pelaksanaan peralihan dan animasi adalah sangat mudah. Dalam artikel ini, kami akan membincangkan cara menggunakan peralihan dan animasi Vue.js, termasuk cara menggayakan dan mencetuskan peristiwa peralihan.

Peralihan

Dalam Vue.js, peralihan merujuk kepada menambahkan kesan animasi pada elemen apabila ia dimasukkan, dikemas kini atau dialih keluar. Vue.js melaksanakan peralihan melalui arahan peralihan v dan komponen peralihan.

Arahan peralihan v

Arahan peralihan v mencetuskan kesan peralihan yang sepadan apabila elemen dimasukkan, dikemas kini atau dialih keluar. Kesan peralihan boleh ditakrifkan dengan menetapkan nama kelas peralihan. Sebagai contoh, kita boleh pudar masuk apabila elemen dimasukkan dan pudar apabila ia dialih keluar:

<div v-transition="'fade'">
  {{ message }}
</div>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

Dalam contoh di atas, kami menentukan nama kelas .fade untuk mewakili kesan peralihan elemen. Dalam kelas .fade-enter dan .fade-leave-to, kami menetapkan atribut kelegapan kepada 0, menunjukkan keadaan permulaan dan penamat bagi elemen apabila ia dimasukkan dan dialih keluar. Dalam kelas .fade-enter-active dan .fade-leave-active, kami menetapkan atribut peralihan untuk menunjukkan masa peralihan berkuat kuasa.

komponen peralihan

komponen peralihan boleh memudahkan penggunaan peralihan v. Hanya letakkan elemen yang anda mahu peralihan dalam komponen peralihan. Contohnya, kita boleh menggunakan nama komponen yang berbeza untuk menentukan kesan peralihan masuk, keluar dan serentak:

<transition enter-active-class="fadeIn" leave-active-class="fadeOut">
  <div v-show="showDiv">{{ message }}</div>
</transition>

.fadeIn-enter-active, .fadeOut-leave-active {
  transition: opacity .5s;
}

.fadeIn-enter, .fadeOut-leave-to {
  opacity: 0;
}

.fadeOut-leave, .fadeIn-enter-to {
  opacity: 1;
}

Dalam contoh di atas, kami menggunakan komponen peralihan untuk memudahkan persediaan kesan peralihan. Dengan menetapkan sifat enter-active-class dan leave-active-class, kami mentakrifkan kesan peralihan untuk masuk dan keluar. Pada masa yang sama, kami mentakrifkan keadaan mula dan akhir elemen dengan menetapkan nama kelas fade-in dan fade-out.

Animasi

Dalam Vue.js, animasi merujuk kepada menambahkan kesan animasi pada elemen apabila ia tidak dimasukkan, dikemas kini atau dialih keluar. Vue.js melaksanakan animasi melalui arahan v-animasi dan komponen animasi.

Arahan v-animasi

Arahan v-animasi mencetuskan kesan animasi yang sepadan apabila elemen tidak dimasukkan, dikemas kini atau dialih keluar. Kesan animasi boleh ditakrifkan dengan menetapkan nama kelas animasi. Sebagai contoh, kita boleh menskalakan elemen apabila tetikus melayang:

<div v-animation="'hoverScale'">
  {{ message }}
</div>

.hoverScale {
  transform: scale(1);
}

.hoverScale:hover {
  transform: scale(1.5);
}

Dalam contoh di atas, kami menentukan nama kelas .hoverScale untuk mewakili kesan animasi elemen. Dalam kelas .hoverScale, kami menetapkan atribut transform untuk menunjukkan bahawa keadaan permulaan elemen ialah saiz asalnya. Dalam kelas .hoverScale:hover, kami menetapkan sifat transformasi untuk dibesarkan 1.5 kali, menunjukkan keadaan akhir elemen.

komponen animasi

komponen animasi boleh memudahkan penggunaan v-animasi. Hanya letakkan elemen yang anda mahu animasikan dalam komponen animasi. Sebagai contoh, kita boleh menggunakan nama komponen yang berbeza untuk mentakrifkan kesan animasi yang berbeza:

<animation name="rotate">
  <div>{{ message }}</div>
</animation>

@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

.rotate {
  animation: rotate 1s infinite;
}

Dalam contoh di atas, kami menggunakan komponen animasi untuk memudahkan penetapan kesan animasi. Dengan menetapkan atribut nama, kami mentakrifkan nama animasi sebagai putar. Dalam kelas .rotate, kami menetapkan sifat animasi dan menentukan sifat dan tempoh animasi. Dalam @keyframes, kami menetapkan keadaan permulaan dan akhir animasi.

Ringkasan

Vue.js menyediakan fungsi peralihan dan animasi yang mudah yang boleh menambah kesan terang pada antara muka pengguna. Dengan menggunakan arahan peralihan v dan komponen peralihan, kami boleh menentukan kesan peralihan apabila elemen dimasukkan, dikemas kini atau dialih keluar. Dengan menggunakan arahan v-animasi dan komponen animasi, kami boleh menentukan kesan animasi apabila elemen tidak dimasukkan, dikemas kini atau dialih keluar. Saya harap tutorial ini akan membantu anda mempelajari peralihan dan animasi dalam Vue.js!

Atas ialah kandungan terperinci Tutorial Asas VUE3: Menggunakan peralihan dan animasi Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!