Komponen Transition

Vue menyediakan komponen bawaan <Transition> yang menerapkan animasi masuk dan keluar pada elemen atau komponen satu saat elemen tersebut disisipkan atau dihapus melalui v-if atau v-show.

Komponen ini tidak merender elemen DOM tambahan apa pun—hanya mengelola kelas CSS dan waktu pada elemen anaknya.

<Transition> mengharapkan tepat satu anak langsung. Membungkus beberapa elemen saudara tidak akan berfungsi — gunakan <TransitionGroup> sebagai gantinya untuk daftar.

Anak tersebut harus diaktifkan atau dinonaktifkan dengan v-if, v-show, atau komponen dinamis.

Selama proses masuk atau keluar, Vue secara otomatis menambahkan dan menghapus enam kelas secara berurutan.

• v-enter-from / v-leave-from - keadaan awal
• v-enter-active / v-leave-active - fase aktif (letakkan transisi di sini)
• v-enter-to / v-leave-to - keadaan akhir

Berikan prop name pada transisi agar awalan kelas berubah dari v- menjadi nama Anda. Dengan name="fade", kelasnya menjadi fade-enter-from, fade-enter-active, dan seterusnya.

Efek memudar klasik menganimasikan opacity. Elemen dimulai dalam keadaan sepenuhnya transparan, kelas aktif mendeklarasikan transisi, dan kelas tujuan membawanya ke opasitas penuh.

Saat elemen disisipkan:

1. fade-enter-from dan fade-enter-active ditambahkan sebelum proses gambar (opasitas 0).
2. Pada bingkai berikutnya, fade-enter-from dihapus dan fade-enter-to ditambahkan, sehingga opasitas menganimasi menuju 1.
3. Saat transisi berakhir, kedua kelas aktif dan tujuan dihapus.

Proses keluar mencerminkan proses masuk dengan kelas leave. Anda sering menggunakan kembali aturan aktif yang sama untuk kedua arah.

Keduanya memicu transisi. v-if benar-benar memasang dan melepas elemen, sedangkan v-show mempertahankannya di DOM dan mengubah display. Untuk v-show, Vue menangani perubahan tampilan di sekitar fase aktif agar animasi tetap terlihat.

Secara bawaan, transisi tidak berjalan saat render pertama. Tambahkan prop appear agar animasi masuk berjalan ketika komponen pertama kali dipasang.

Gunakan v-if / v-else di dalam satu Transition untuk menukar dua elemen. Berikan key yang unik pada masing-masing elemen jika keduanya memiliki tag yang sama agar Vue memperlakukannya sebagai elemen yang berbeda.

Hormati pengguna yang lebih menyukai sedikit gerakan. Nonaktifkan atau persingkat transisi dengan kueri media prefers-reduced-motion agar animasi tidak menimbulkan ketidaknyamanan.

Anda telah mempelajari komponen bawaan <Transition>: komponen ini membungkus satu elemen yang diaktifkan atau dinonaktifkan oleh v-if/v-show, menerapkan enam kelas CSS (enter-from, enter-active, enter-to dan padanan keluarnya), mendukung awalan name, appear untuk render pertama, serta mode untuk pertukaran.