Melalui sistem transisi Vue.js, Anda dapat dengan mudah menambahkan efek animasi transisi ke proses memasukkan/menghapus node DOM. Vue akan menambah/menghapus nama kelas CSS pada waktu yang tepat untuk memicu efek transisi/animasi CSS3. Anda juga dapat memberikan fungsi kait JavaScript yang sesuai untuk melakukan operasi DOM khusus selama proses transisi.
Mengambil instruksi V-transisi = "my-transition" sebagai contoh, ketika simpul DOM dengan instruksi ini dimasukkan atau dihapus, vue akan:
Gunakan ID transisi MY untuk mengetahui apakah ada objek Hook JavaScript terdaftar. Objek ini dapat didaftarkan secara global oleh Vue.transition (ID, Hooks) atau didefinisikan di dalam komponen saat ini melalui opsi transisi. Jika objek ini ditemukan, kait yang sesuai akan dipanggil pada tahap berbeda dari animasi transisi.
Secara otomatis mendeteksi apakah elemen target memiliki efek transisi CSS atau efek animasi yang diterapkan, dan menambah/menghapus nama kelas CSS pada waktu yang tepat.
Jika fungsi kait JavaScript tidak disediakan dan efek transisi/animasi CSS yang sesuai tidak terdeteksi, penyisipan/penghapusan DOM dilakukan segera di bingkai berikutnya.
Semua efek transisi Vue.js hanya akan berlaku jika operasi DOM dipicu melalui Vue.Js. Pemicu dapat dilakukan dengan instruksi bawaan, seperti V-IF, atau melalui metode instance VUE, seperti VM. $ AppendTo ().
Efek transisi CSS
Efek transisi CSS yang khas didefinisikan sebagai berikut:
<Div v-if = "show" v-transition = "expand"> hello </div>
Anda juga perlu mendefinisikan tiga kelas CSS:. Transisi Ekspand,. Expand-Enter dan. Expand-Leave:
.Expand-transition {Transisi: All .3s Kemudahan; Tinggi: 30px; padding: 10px; latar belakang-warna: #EEE; overflow: tersembunyi;}. Expand-enter, .Expand-leave {Height: 0; padding: 0 10px; opacity: 0;}Pada saat yang sama, Anda juga dapat memberikan kait javascript:
Vue.transition ('expand', {sebelum pusat: function (el) {el.textcontent = 'sebelum pusat'}, enter: function (sel) {el.textcontent = 'enter'}, aftercancel: function (el) {eltextcontent = 'afterenter'}} aftercancel: entercell: {el) {eltextcontent = 'afterenter'}} entercell: entercell: {el) {eltextcontent = 'afterselser'}} {entercanceled: entercanc: entercancel: (el) {el.textContent = 'beforeleave'}, leave: function (el) {el.textContent = 'cuti'}, afterleave: function (el) {el.textContent = 'fterleave'}, leavecancelled: function (el) {// menangani kankelasi}}}}})hasil
Nama kelas CSS yang digunakan di sini ditentukan oleh nilai arahan V-transisi. Mengambil V-Transition = "Fade" sebagai contoh, kelas CSS.-Transisi Perjanjian akan selalu ada, dan .Fade-Enter dan .fade-leave akan ditambahkan atau dihapus secara otomatis pada waktu yang tepat. Ketika arahan V-transisi tidak memberikan nilai, nama kelas CSS yang digunakan akan menjadi transisi .v-transisi, .v-enter, dan .v-leave.
Ketika atribut show berubah, VUE akan memasukkan/menghapus elemen <div> berdasarkan nilai saat ini, dan menambah/menghapus kelas CSS yang sesuai pada waktu yang sesuai, sebagai berikut:
Saat pertunjukan menjadi salah, Vue akan:
1. Hubungi Hook Beforeleave;
2. Terapkan kelas CSS .v-leave pada elemen untuk memicu efek transisi;
3. Panggil kait cuti;
4. Tunggu efek transisi dieksekusi; (Dengarkan acara TransitionEnd)
5. Lepaskan elemen dari DOM dan hapus kelas CSS .v-leave.
6. Panggil Hook Afterleave.
Saat pertunjukan itu benar, Vue akan:
1. Hubungi Hook sebelumnya;
2. Terapkan CSS Class.v-enter pada elemen;
3. Masukkan elemen ke dalam DOM;
4. Hubungi Hook Enter;
5. Oleskan kelas .V-enter, dan kemudian paksa tata letak CSS untuk memastikan bahwa .V-enter mulai berlaku; Akhirnya hapus .V-enter untuk memicu elemen ke transisi ke keadaan aslinya.
6. Tunggu efek transisi dieksekusi;
7. Panggil Hook Afteran.
Selain itu, jika suatu elemen yang mengeksekusi efek transisi yang masuk dihapus sebelum transisi selesai, pengait Entercancelled akan dieksekusi. Kait ini dapat digunakan untuk pekerjaan pembersihan, seperti menghapus timer yang dibuat saat Enter. Hal yang sama berlaku untuk elemen yang sedang dimasukkan kembali selama transisi.
Ketika semua fungsi kait di atas dieksekusi, ini menunjuk ke instance Vue yang sesuai. Jika suatu elemen itu sendiri adalah simpul root dari instance Vue, instance akan diterapkan seperti ini; Kalau tidak, ini menunjuk pada contoh yang dimiliki oleh instruksi transisi.
Akhirnya, fungsi Hook Enter and Leave dapat menerima parameter kedua opsional: fungsi panggilan balik. Ketika tanda tangan fungsi Anda berisi parameter kedua, itu berarti Anda berharap untuk menggunakan panggilan balik ini untuk secara eksplisit menyelesaikan seluruh proses transisi, daripada mengandalkan VUE untuk secara otomatis mendeteksi peristiwa transisi transisi dari transisi CSS. Misalnya:
Enter: function (el) {// Tidak ada parameter kedua // akhir efek transisi ditentukan oleh acara akhir transisi CSS}Vs.
masukkan: function (el, selesai) {// Ada parameter kedua // akhir efek transisi harus ditentukan dengan memanggil secara manual `selesai`}Ketika beberapa elemen melakukan efek transisi secara bersamaan, Vue.js akan memproses untuk memastikan bahwa tata letak paksa dipicu hanya sekali.
Animasi CSS
Animasi CSS disebut dengan cara yang sama seperti efek transisi CSS. Perbedaannya adalah bahwa dalam animasi, 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" v-transition = "bounce"> lihat aku! </span>
.bounce-enter {animation: bounce-in .5s;}. Bounce-leave {animasi: bounce-out .5s;}@Keyframes Bounce-in {0% {transform: scale (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); }}hasil
Efek transisi javascript murni
Anda juga dapat menggunakan kait JavaScript tanpa mendefinisikan aturan transisi CSS. Saat hanya menggunakan kait JavaScript, kait Enter and Leave harus menggunakan callback yang dilakukan, jika tidak mereka akan disebut secara sinkron dan transisi akan segera berakhir. Dalam contoh berikut, kami menggunakan jQuery untuk mendaftarkan efek transisi JavaScript khusus:
Vue.transition('fade', { enter: function (el, done) { // The element has been inserted into the DOM at this time // Call done when the animation is completed $(el) .css('opacity', 0) .animate({ opacity: 1 }, 1000, done) }, enterCancelled: function (el) { $(el).stop() }, leave: function (el, done) {// Mirip dengan enter hook $ (el) .animate ({opacity: 0}, 1000, selesai)}, leavecancelled: function (el) {$ (el) .stop ()}}))Setelah mendefinisikan transisi ini, Anda dapat menyebutnya dengan menentukan ID yang sesuai untuk transisi V:
<p v-transisi = "fade"> </p>
Jika suatu elemen yang hanya menggunakan efek transisi JavaScript kebetulan dipengaruhi oleh aturan transisi/animasi CSS lainnya, ini dapat mengganggu mekanisme deteksi transisi CSS VUE. Saat menghadapi situasi ini, Anda dapat melarang deteksi CSS dengan menambahkan CSS: Salah pada objek pengait Anda.
Efek transisi secara bertahap
Saat menggunakan V-transisi dan V-repeat, kami dapat menambahkan efek transisi progresif ke elemen daftar. Anda hanya perlu menambahkan fitur terhuyung-huyung, enter-stagger atau cuti (dalam milidetik):
<Div V-Repeat = "Daftar" V-Transition Stagger = "100"> </div>
Atau Anda juga dapat memberikan kait yang terhuyung -huyung, Enterstagger atau Eavestragger untuk kontrol granular yang lebih baik:
Vue.transition ('stagger', {stagger: function (index) {// tambahkan penundaan 50ms ke setiap elemen transisi, // tetapi penundaan maksimum adalah 300ms return math.min (300, index * 50)}})Contoh:
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.