Halo, Habr! Saya memutuskan untuk memulai kegiatan saya dengan menerjemahkan artikel ke dalam bahasa Rusia, yang saya sendiri mendapat manfaatnya sangat besar. Saya harap Anda berguna. Saya perhatikan bahwa saya mencoba menerjemahkan sastra, bukan kata demi kata.
Pertama-tama, saya memperkenalkan terjemahan artikel
"Vue.js render functions and transitions" oleh Hajime Yamasaki Vukelic.
Vue.js membuat fungsi dan transisi
Dokumentasi Vue.js tentang fungsi render buruk. Untuk pengguna yang menggunakan JSX dengan fungsi render, ini dapat membuat masalah. Pada artikel ini, kita akan melihat cara membuat transisi dalam skenario khusus ini.
Saya menggunakan JSX dalam contoh, tetapi semuanya bekerja dengan fungsi rendering JavaScript yang sederhana, karena JSX hanyalah gula sintaksis untuk panggilan h (). Jika Anda ingin tahu lebih banyak tentang topik ini, lihat
artikel ini.
Bagaimana transisi bekerja secara umum
Inti dari transisi adalah bahwa Anda memiliki komponen transisi bawaan yang menetapkan kelas ke elemen yang di-mount (masuk) atau turun (pergi).
Tarian Pikabu
Nuansa utama: bagaimana menentukan tempat pemasangan atau pembongkaran elemen. Masalah ini dapat diselesaikan dengan beberapa cara.
Anda dapat menggunakan operator ternary untuk mengimplementasikan tampilan / hilangnya elemen:
render(h) { <transition> {this.showDiv ? <div class="myDiv">Hello</div> : null} </transition> }
atau untuk mengganti satu item dengan yang lain:
render(h) { <transition> {this.showOneOrTheOther ? <div class="myDiv">Hello</div> : <div class="myOtherDiv">Hello again</div> } </transition> }
Tidak, saya hanya bercanda. Tentu saja, Anda tidak dapat menggunakan operator ternary tanpa parameter tambahan untuk mengganti elemen tersebut. Namun, ada nuansa. Algoritma perbandingan memutuskan bahwa sudah ada elemen di sana, jadi alih-alih menghapusnya dari DOM, itu hanya memperbaikinya sehingga terlihat seperti elemen lain.
Akan lebih baik jika Anda menggunakan kunci saat mengganti elemen:
render(h) { <transition> {this.showOneOrTheOther ? <div key="myDiv" class="myDiv">Hello</div> : <div key="myOtherDiv" class="myOtherDiv">Hello again</div> } </transition> }
Jika ada kunci, dua elemen benar-benar berubah (yang lama dibongkar, dan yang baru dipasang di tempatnya), sementara kunci berbeda.
Demikian pula, jika Anda ingin menukar komponen atau elemen dari komponen / elemen yang sama:
render(h) { <transition> <div key={this.subcomponentKey}> <MyComponent /> </div> </transition> }
Dalam contoh di atas, metode this.subcomponentKey akan entah bagaimana menghitung kunci yang sesuai untuk komponen MyComponent.
Perbedaan utama
Ketika kita berbicara tentang kunci, ingat bahwa elemen / komponen selalu ditampilkan sepenuhnya ketika kunci diubah. Di sisi lain, selama kunci tetap sama, elemen / komponen tidak berubah.
Jangan biarkan ini mengejutkan Anda. Sebelum Anda secara tidak sengaja menambahkan kunci ke hampir semua yang bergerak (atau harus bergerak), pertimbangkan dengan hati-hati apa nilai kunci ini. Pertama periksa tanpa kunci, tulis hasilnya, lalu tambahkan kunci dan lihat apakah Anda dapat mengulangi efek yang sama. Jika antarmuka pengguna tidak akan diperbarui, Anda mungkin memilih nilai kunci yang salah.
Menambahkan Animasi
Sekarang kita tahu bagaimana membuat elemen kita pergi dan kembali, saatnya untuk bekerja pada animasi.
Dalam kasus yang paling sederhana, kami memiliki dua kelas. Satu kelas selalu diterapkan, dan yang lainnya diterapkan ketika elemen / komponen dirakit atau diturunkan.
// my.css .base { transition: transform 1s; } .out { transform: translateX(-100vw); }
Sekarang tambahkan kelas-kelas ini ke kode:
render(h) { <transition enter-class="out" leave-to-class="out"> {this.someProp ? <div class="base">Hello</div> : null} </transition> }
Kelas-kelas ini (enter-class dan leave-to-clas) dijelaskan dengan baik dalam
dokumentasi . Baca tentang mereka di sana.
Enter-class berfungsi sebagai repositori untuk gaya yang berlaku segera setelah pemasangan elemen. Segera setelah ini, kelas dihapus. Kami menambahkan transisi untuk membuat animasi antara waktu enter-class digunakan dan waktu ketika itu tidak ada (ketika hanya kelas .base digunakan).
Kelas meninggalkan-ke-kelas diterapkan segera sebelum item dihapus. Vue.js kemudian menunggu animasi selesai, dan kemudian menghapus item dari pohon DOM. Sekali lagi, kami menggunakan transisi untuk membuat animasi.
Dalam contoh kita, kita menggunakan kelas .out yang sama untuk masuk dan keluar, tetapi kita bisa menggunakan kelas yang berbeda untuk dua acara.
Kesimpulan
Saya harap Anda sekarang memahami konsep-konsep kunci dari transisi Vue.js ketika digunakan dalam fungsi rendering dan dengan JSX. Namun, transisi Vue.js menawarkan lebih banyak fitur, seperti kemampuan untuk terhubung ke acara transisi menggunakan JavaScript dan, karenanya, melakukan bahkan beberapa hal yang tidak terkait dengan animasi (semacam perangkap siklus hidup). Saya akan mengakhiri artikel di sini dan menyerahkan eksperimen kepada pembaca yang saya kasihi.
Selamat melakukan peretasan!