Sistem transisi Vue.js memungkinkan Anda untuk secara otomatis menerapkan efek transisi ketika elemen dimasukkan atau dihapus dari DOM. Vue.js akan memicu transisi atau animasi CSS untuk Anda pada waktu yang tepat, dan Anda juga dapat memberikan fungsi kait JavaScript yang sesuai untuk melakukan operasi DOM khusus selama proses transisi.
Untuk menerapkan efek transisi, Anda perlu menggunakan fitur transisi pada elemen target:
<Div V-if = "show" transition = "my transition"> </div>
Fitur transisi dapat digunakan dengan sumber daya berikut:
• V-if
• V-show
• V-for (hanya dipecat saat memasukkan dan menghapus, menggunakan plugin daftar-animasi)
• Komponen Dinamis (lihat Komponen untuk Pendahuluan)
• Pada simpul root komponen, dan dipicu oleh metode DOM instan VUE (seperti VM. $ Appendto (EL)).
Saat memasukkan atau menghapus elemen dengan transisi, vue akan:
1. Cobalah untuk menemukan objek Hook Transisi JavaScript dengan ID "My -Transition" - Daftarkan dengan opsi Vue.transition (ID, Hooks) atau transisi. Jika ditemukan, kait yang sesuai akan dipanggil pada tahap transisi yang berbeda.
2. Secara otomatis mengendus elemen target untuk transisi atau animasi CSS, dan menambahkan/menghapus nama kelas CSS bila perlu.
3. Jika kait JavaScript tidak ditemukan dan transisi/animasi CSS tidak terdeteksi, operasi DOM (masukkan/hapus) dieksekusi segera di bingkai berikutnya.
Transisi CSS
Contoh
Transisi CSS yang khas adalah seperti ini:
<Div v-if = "show" transition = "expand"> hello </div>
Kemudian tambahkan aturan CSS untuk `. Expand-transisi`,` .Expand-enter` dan `.Expand-leave`:
/* Diperlukan*/. Perluas transisi {transisi: semua .3S kemudahan; Tinggi: 30px; padding: 10px; latar belakang-warna: #EEE; overflow: tersembunyi;}/*. expand-enter mendefinisikan status awal entri* //*. expand-leave mendefinisikan keadaan akhir keberangkatan*/. Expand-enter, .Expand-leave {Height: 0; padding: 0 10px; opacity: 0;}Anda dapat mencapai transisi yang berbeda pada elemen yang sama melalui pengikatan dinamis:
<Div v-if = "show": transition = "transitionName"> halo </div>
vue baru ({el: '...', data: {show: false, transitionname: 'fade'}})Selain itu, kait javascript dapat disediakan:
Vue.transition('expand', { beforeEnter: function (el) { el.textContent = 'beforeEnter' }, enter: function (el) { el.textContent = 'enter' }, afterEnter: function (el) { el.textContent = 'afterEnter' }, enterCancelled: function (el) { // handle cancellation }, beforeLeave: function (el) {el.textContent = 'beforeleave'}, leave: function (el) {el.textContent = 'cuti'}, afterleave: function (el) {el.textContent = 'fterleave'}, leavecancelled: function (el) {// menangani kankelasi}}}}})Nama kelas CSS Transisi
Penambahan dan pengalihan nama kelas tergantung pada nilai atribut transisi. Misalnya, transisi = "fade", akan ada tiga nama kelas CSS:
1..-transisi yang dipertahankan selalu dipertahankan pada elemen.
2..Men-enter mendefinisikan keadaan awal memasuki transisi. Terapkan hanya satu bingkai dan hapus segera.
3..-Fade-Leave mendefinisikan keadaan akhir meninggalkan transisi. Efektif di awal transisi keberangkatan dan hapus setelah berakhir.
Jika atribut transisi tidak memiliki nilai, nama kelas adalah .v-transisi, .v-enter, dan .v-leave secara default.
Nama kelas transisi khusus
1.0.14 Baru
Kami dapat mendeklarasikan nama kelas transisi CSS khusus dalam definisi javascript transisi. Nama kelas khusus ini mengganti nama kelas default. Ini bisa sangat berguna ketika Anda perlu bekerja sama dengan perpustakaan animasi CSS pihak ketiga seperti Animate.css:
<div v-show = "ok" transition = "bounce"> watch me bounce </div>
Vue.transition ('bouncing', {enterclass: 'bouncinginleft', leaveclass: 'bouncing'})Secara eksplisit mendeklarasikan jenis transisi CSS
1.0.14 Baru
Vue.js perlu menambahkan pendengar acara ke elemen transisi untuk mendengarkan ketika transisi berakhir. Berdasarkan CSS yang digunakan, acara ini adalah Transitionend atau Animationend. Jika Anda hanya menggunakan salah satu dari keduanya, Vue.js akan dapat secara otomatis menyimpulkan jenis acara yang sesuai berdasarkan aturan CSS yang efektif. Namun, dalam beberapa kasus, suatu elemen mungkin perlu memiliki dua jenis animasi secara bersamaan. Misalnya, Anda mungkin ingin Vue memicu animasi CSS, dan elemen memiliki efek transisi CSS ketika mouse ditangguhkan. Dalam hal ini, Anda perlu secara eksplisit mendeklarasikan jenis animasi (animasi atau transisi) yang ingin Anda tangani:
Vue.transition ('bounce', {// efek transisi ini hanya akan mendengarkan tipe acara `animationend`: 'animation'})Penjelasan terperinci tentang proses transisi
Ketika properti show berubah, vue.js akan memasukkan atau menghapus elemen <div> yang sesuai, mengubah nama kelas CSS transisi sesuai dengan aturan berikut:
• Jika pertunjukan menjadi salah, vue.js akan:
1. Hubungi Hook Beforeleave;
2. Tambahkan nama kelas V-leave ke elemen untuk memicu transisi;
3. Panggil kait cuti;
4. Tunggu transisi berakhir (dengarkan acara Transitionend);
5. Hapus elemen dari DOM dan hapus nama kelas V-leave;
6. Panggil Hook Afterleave.
• Jika pertunjukan menjadi benar, vue.js akan:
1. Hubungi Hook sebelumnya;
2. Tambahkan nama kelas V-enter ke elemen;
3. Masukkan ke dalam DOM;
4. Hubungi Hook Enter;
5. Tata letak CSS satu kali untuk membuat v-enter efektif. Kemudian hapus nama kelas V-enter untuk memicu transisi dan kembali ke keadaan asli elemen;
6. Tunggu transisi berakhir;
7. Panggil Hook Afteran.
Selain itu, jika suatu elemen dihapus saat transisi masuknya masih berlangsung, kait entercancelled dipanggil untuk membersihkan perubahan atau memasukkan timer yang dibuat. Hal yang sama berlaku untuk meninggalkan transisi secara bergantian.
Ketika semua fungsi kait di atas dipanggil, mereka menunjuk ke instance vue tempat mereka berada. Aturan Kompilasi: Dalam konteks mana transisi dikompilasi, poin ini ke konteks mana.
Akhirnya, masukkan dan cuti dapat memiliki parameter panggilan balik opsional kedua yang secara eksplisit mengontrol bagaimana transisi berakhir. Oleh karena itu, tidak perlu menunggu acara CSS Transitionend, Vue.js akan menunggu Anda untuk memanggil panggilan balik ini secara manual untuk mengakhiri transisi. Misalnya:
Enter: function (el) {// Tidak ada parameter kedua // acara CSS TransitionEnd menentukan kapan transisi berakhir}Vs.
Enter: function (el, selesai) {// Ada parameter kedua // transisi hanya berakhir ketika `selesai` disebut}<p> Saat beberapa elemen transisi bersama, vue.js akan memproses dan hanya memaksa tata letak sekali.
Animasi CSS
Penggunaan animasi CSS beralih ke CSS. Perbedaannya adalah bahwa dalam animasi, nama kelas V-enter tidak dihapus segera setelah node dimasukkan ke dalam DOM, tetapi dihapus ketika acara Animationend dipicu.
Contoh: (awalan kompatibilitas dihilangkan)
<span v-show = "show" transition = "bounce"> Look at Me! </span> .bounce-transition {display: inline-block; /* Jika tidak, animasi skala tidak akan berfungsi*/}. Bounce-enter {animasi: bouncing-in .5s;}. Bounce-leave {animasi: bounce-out .5s;}@KeyFrames Bounce-in {0% {transform: skala (0); } 50% {transform: skala (1.5); } 100% {transform: skala (1); }}@KeyFrames Bounce-out {0% {transform: scale (1); } 50% {transform: skala (1.5); } 100% {transform: skala (0); }}Transisi JavaScript
Anda juga dapat menggunakan hanya kait javascript tanpa mendefinisikan aturan CSS. Saat menggunakan JavaScript saja, kait Enter and Leave perlu memanggil panggilan balik yang dilakukan, jika tidak mereka akan disebut secara serempak dan transisi akan segera berakhir.
Adalah ide yang baik untuk secara eksplisit mendeklarasikan CSS: Salah untuk transisi JavaScript, dan Vue.js akan melewatkan deteksi CSS. Ini juga akan mencegah aturan CSS mengganggu transisi secara tidak sengaja.
Dalam contoh berikut, kami menggunakan jQuery untuk mendaftarkan transisi JavaScript khusus:
Vue.transition('fade', { css: false, enter: function (el, done) { // The element has been inserted into the DOM // Called after the animation $(el) .css('opacity', 0) .animate({ opacity: 1 }, 1000, done) }, enterCancelled: function (el) { $(el).stop() }, leave: function (el, done) {// Sama seperti Enter $ (el) .animate ({opacity: 0}, 1000, selesai)}, leavecancelled: function (el) {$ (el) .stop ()}}))Kemudian gunakan fitur transisi:
<p transisi = "fade"> </p>
Transisi asimptotik
Transisi dapat digunakan bersama dengan V-FOR untuk membuat transisi asimptotik. Tambahkan fitur terhuyung, enter-stagger atau cuti ke elemen transisi:
<Div v-for = "item dalam daftar" transisi = "stagger" stagger = "100"> </div>
Atau, berikan hook terhuyung, enter-stagger atau cuti untuk kontrol yang lebih baik:
Vue.transition ('stagger', {stagger: function (index) {// Setiap item transisi menambahkan 50ms delay // tetapi batas tunda maksimum adalah 300ms return math.min (300, index * 50)}})Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.
Untuk tutorial tentang komponen vue.js, silakan klik topik khusus tutorial pembelajaran komponen vue.js untuk dipelajari.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.