Artikel ini adalah penjelasan yang lebih komprehensif dan terperinci yang disusun oleh editor dalam kombinasi dengan dokumen resmi, dengan lebih banyak kode lengkap.
Artikel ini berasal dari dokumen resmi:
http://cn.vuejs.org/guide/transitions.html
Mari kita lihat pengetahuan yang relevan tentang animasi transisi:
① Definisi animasi transisi;
Sederhananya, itu adalah bentuk yang akan hilang dan muncul ketika modul menghilang dan muncul;
Jika Anda ingin menggunakan animasi transisi, tambahkan atribut ke tag:
transisi = "nama animasi transisi"
Misalnya:
<Div v-if = "box_1" transisi = "mytran"> 1 </div>
Inilah Mytran, yang merupakan nama animasi transisi. Itu adalah nama kelas. Animasi akan menambahkan beberapa ekstensi berbeda berdasarkan nama ini (lihat di bawah untuk detailnya)
② Acara Binding Animasi Transisi:
【1】 V-if
【2】 V-Show
【3】 V-for (hanya dipicu saat memasukkan dan menghapus, Anda dapat menulisnya sendiri, atau menggunakan plug-in daftar-animasi-animasi);
Tulis sendiri misalnya:
<div v-for = "i in item" transition = "mytran"> {{i}} </div>Metode penulisan animasi singkat (lihat di bawah)
【4】 Komponen dinamis;
[5] Pada simpul root komponen, dan dipicu oleh metode DOM instan VUE (misalnya: VM. $ AppendTo (EL)). Mungkin, tambahkan komponen ke simpul root.
Animasi ③CSS:
[1] Pertama, Anda harus memiliki atribut transisi dan kemudian mendapatkan nilainya;
【2】 Kedua, ada tiga nama kelas dalam CSS dengan nilai, yaitu:
Dengan asumsi nilai transisi adalah mytran, nama kelasnya
menjelaskan
.Mytran-transisi
Dalam keadaan animasi, atribut transisi CSS ditempatkan di sini, dan kelas yang diwakilinya akan selalu ada di DOM;
Selain itu, gaya di sini akan mengesampingkan gaya yang disediakan oleh kelas default label
.Mytran-enter
Saat memasuki, komponen berkembang dari keadaan CSS ini ke keadaan CSS saat ini, dan kelas ini hanya memiliki bingkai pertama.
.Mytran-leave
Saat keluar, komponen mengembalikan keadaan ini dari keadaan CSS asli. Kelas ini mulai berlaku dari awal pintu keluar dan dihapus di akhir pintu keluar.
Sebagai kode:
<tyle> .box {width: 100px; Tinggi: 100px; Perbatasan: 1px solid red; Tampilan: blok inline; } /* Ini mendefinisikan situasi animasi dan gaya saat itu ada. Gaya ini akan mengesampingkan gaya di kelas*/ .mytran-transisi {transisi: semua kemudahan 0,3; Latar Belakang: Greenyellow; } /* .mytran-enter mendefinisikan status awal entri* / /* .mytran-leave mendefinisikan keadaan akhir keberangkatan* / .mytran-enter, .mytran-leave {height: 0; Lebar: 0; } </style> <div id="app"> <button @click="change">Click to hide and show randomly</button> <br/> <div v-if="box_1" transition="mytran">1</div> <div v-if="box_2" transition="mytran">2</div> <div v-if="box_3" transition="mytran">3</div> </div> <script> var vm = vue baru ({el: '#App', data: {box_1: true, box_2: true, box_3: true}, metode: {ubah: function () {for (var i = 1; i <4; i ++) {this ['box_'+i] = math.random () (4; i ++) {ini ['box_'+i] = math.random () 0.5? 300); </script>Mengklik secara acak akan membuat 3 blok sembunyikan atau ditampilkan;
④JavaScript Hook:
[1] Sederhananya, ini tidak mempengaruhi animasi CSS (masih perubahan dalam ketiga kategori tersebut);
[2] Ini terutama digunakan untuk mengambil masuk dan berangkat masing -masing empat momen, dan digunakan untuk melakukan hal -hal tertentu;
【3】 Delapan momen ini adalah:
Enter: sebelum pusat (sebelum masuk), masukkan (sebelum masukkan animasi baru saja dimulai), after-tenter (sebelum masukkan ujung animasi), entercancelled (sebelum masuk terganggu);
Keluar: beforeleave (sebelum keluar), tinggalkan (animasi keluar baru saja dimulai), afterleave (animasi keluar berakhir), leavecelled (pintu keluar terganggu);
[4] Modifikasi DOM akan dipulihkan dalam beberapa kasus. Misalnya, memodifikasi properti TextContent dari DOM dalam langkah cuti akan mengembalikan keadaan asli ketika DOM masuk kembali; Tetapi jika dimodifikasi dalam langkah Enter, itu tidak akan dipulihkan.
Sebagai kode:
Vue.transition ('mytran', {sebelum pusat: function (el) {// sebelum masuk console.log ("Masukkan waktu mulai animasi:" + date baru (). GetTime ());}, enter: function (el) {el.textcontent = new date ();}, afterEnter: function (el) {el console) () date () ();}, afterEnter: function (el) {console) (console) ("new date ();}, afterenter: function (eL) {console) (console) (" new date ();}, afterEnter: function (el) {console)) date () (); }, befteeleave: function (el) {console.log ("Cuti waktu mulai animasi:" + tanggal baru (). GetTime ()));⑤Custom Transition Class Name:
Alasan untuk menyesuaikan nama kelas transisi adalah bahwa kami tidak dapat mensyaratkan bahwa gaya setiap animasi CSS ditulis sesuai dengan metode penulisan standar Vuejs (seperti kami mengunduh kode yang ditulis oleh orang lain);
CATATAN: Definisi perlu dibuat sebelum mendeklarasikan instance Vue yang relevan.
Pertama -tama, saya merekomendasikan kumpulan animasi yang direkomendasikan oleh tutorial resmi Vuejs: (Ini bukan tautan unduhan, Anda harus membukanya untuk menemukan tautan unduhan sebelum Anda dapat mengunduhnya)
https://daneden.github.io/animate.css/
Setelah mengunduh, impor file CSS ini dan mulailah menyesuaikan animasi;
<div id = "app"> <button @click = "ubah"> Klik untuk menyembunyikan dan menunjukkan secara acak </button> <br/> <div v-if = "box" transition = "bounce"> 1 </div> </div> <script> vue.transition ("bouncing", {enterclass: 'bouncing', bounce {bounce ', enterclass:' bounce ', bounce', bounce ', bounce: '#app', data: {box: true}, metode: {ubah: function () {this.box =! this.box; </script>menjelaskan:
【1】 Tag hewan diminta untuk memiliki kelas animasi;
【2】 Enterclass dan Leaveclass setara dengan XXX-enter sebelumnya dan XXX-LEVE;
【3】 Efeknya adalah berkedip dari kiri dan berkedip keluar dari kanan.
[4] Anda perlu mengatur animasi sebelum menyatakan vue instance, jika tidak itu akan tidak valid;
⑥Gunakan animasi
Di Vuejs, animasi animasi dan animasi transisi berbeda.
Sederhananya, animasi transisi dibagi menjadi tiga langkah: kelas permanen, kelas dipicu saat masuk, dan kelas dipicu saat keluar; Hanya kelas permanen yang memiliki atribut animasi transisi, dan dua langkah lainnya hanya memiliki keadaan CSS;
Animasi animasi dibagi menjadi dua langkah: kelas yang dipicu saat masuk dan kelas dipicu saat keluar. Tentu saja, kelas transisi XXX ada di DOM (kelas ini dapat digunakan untuk mengatur asal animasi, atau tidak mengatur kelas ini);
Dalam animasi animasi, kelas kelas saat memasuki dan keluar harus memiliki efek animasi, misalnya:
@keyframes fat {0% {width: 100px} 50% {width: 200px} 100% {width: 100px}} .fat-leave, .fat-enter {animation: fat 1s keduanya; }Saat memasuki dan keluar, nama-nama kelas yang dieksekusi sama dengan transisi, dan berada dalam format XXX-LEAVE dan XXX-ENTER;
Tentu saja, Anda juga dapat menyesuaikan nama kelas.
Kode contoh:
<tyle> .box {width: 100px; Tinggi: 100px; Perbatasan: 1px solid red; Tampilan: blok inline; } @keyframes fat {0% {width: 100px} 50% {width: 200px} 100% {width: 100px}} .fat-leave, .fat-enter {animasi: lemak 1s keduanya; } </style> <div id = "app"> <button @click = "ubah"> klik untuk menyembunyikan dan menampilkan secara acak </button> <br/> <v-v-if = "box" transition = "fat"> 1 </div> </div> <script> var vm = new vue ({el: '#app', data: {{trick>} {{{{{{{{{) {{{{{{{{{{{). }); </script>Memengaruhi:
Menghilang: lebih luas, lalu pulih, lalu menghilang;
Enter: muncul, melebar, pulih, tetap;
Di sini saya malas dan berbagi efek animasi yang sama.
⑦daya tambahan untuk ini
[1] secara eksplisit menyatakan jenis animasi (jika animasi memiliki transisi dan animasi pada saat yang sama, dan salah satunya akan dieksekusi dalam situasi yang berbeda);
[2] Penjelasan terperinci tentang proses transisi (urutan eksekusi kait JS dan eksekusi CSS ketika animasi dipicu);
[3] Animasi CSS (yaitu animasi, seperti yang ditulis di atas, dihilangkan secara detail);
[4] Transisi JavaScript (bukan kait JS, kait berarti bahwa fungsi tertentu akan dipanggil pada tahap tertentu, tetapi kait ini tidak ada hubungannya dengan animasi), dan menggunakan JavaScript untuk mengontrol animasi, seperti metode animasi JQuery;
【5】 Transisi bertahap yang digunakan oleh V-for;
Karena tidak tersedia untuk saat ini, itu dihilangkan. Jika Anda perlu melihatnya, buka koneksi:
http://cn.vuejs.org/guide/transitions.html
Di atas adalah analisis komprehensif dari kasus animasi transisi Vuejs dari Vuej ketujuh yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!