Vue Academy · Pelajaran

TransitionGroup untuk Animasi Daftar

Menganimasikan daftar v-for, transisi perpindahan, animasi bertahap dengan jeda.

TransitionGroup untuk Animasi Daftar adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Menganimasikan Daftar

<Transition> menangani satu elemen. Untuk daftar yang dirender dengan v-for, gunakan <TransitionGroup>, yang menganimasikan item saat ditambahkan, dihapus, dan diurutkan ulang.

Properti tag

Berbeda dari Transition, TransitionGroup dapat merender elemen pembungkus nyata. Teruskan tag="ul" (atau tag apa pun), dan komponen ini akan menghasilkan elemen tersebut di sekeliling item daftar.

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

Setiap Item Memerlukan key

:key yang unik pada setiap item adalah wajib. Vue menggunakannya untuk melacak item yang berpindah, masuk, atau keluar. Jangan pernah menggunakan indeks array sebagai key untuk daftar yang dianimasikan.

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

Kelas Enter dan Leave

TransitionGroup menggunakan kelas enter/leave yang sama seperti Transition. Definisikan kelas tersebut untuk mengatur tampilan dan penghapusan setiap item.

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

Kelas move Khusus

Fitur yang paling menonjol adalah kelas -move, misalnya list-move. Saat item diurutkan ulang, Vue menganimasikan setiap item dengan mulus ke posisi barunya menggunakan transisi transformasi.

.list-move {
  transition: transform 0.4s ease;
}

Teknik FLIP

Di balik -move terdapat FLIP: F catat posisi lama, L baca posisi baru, I balik dengan transformasi agar item tampak tidak berpindah, lalu P jalankan dengan menghapus transformasi tersebut. Vue melakukan semua ini secara otomatis.

/* Vue computes: translate(oldX - newX) then animates to 0 */

Item yang Keluar Memerlukan Posisi Absolut

Elemen yang sedang dihapus masih menempati ruang, sehingga dapat mengganggu animasi perpindahan elemen di sekitarnya. Tetapkan position: absolute pada kelas leave-active agar item yang keluar dikeluarkan dari alur tata letak.

.list-leave-active {
  position: absolute;
}

Contoh Daftar yang Dapat Diurutkan

Gabungkan kelas enter, leave, dan move, lalu Vue akan menganimasikan penyisipan, penghapusan, dan pengacakan secara bersamaan.

function shuffle() {
  items.value = items.value
    .slice()
    .sort(() => Math.random() - 0.5);
}

Membuat Jeda Bertahap dengan transitionDelay

Untuk membuat item muncul satu per satu, ikat transition-delay sebaris berdasarkan indeks item. Setiap item menunggu sedikit lebih lama daripada item sebelumnya.

<li
  v-for="(item, i) in items"
  :key="item.id"
  :style="{ transitionDelay: i * 50 + 'ms' }"
>
  {{ item.text }}
</li>

Jeda Bertahap dengan Hook JS

Untuk jeda bertahap berbasis data, Anda juga dapat menggunakan hook JS dan atribut data-index, dengan menunda setiap onEnter berdasarkan indeks elemen.

function onEnter(el, done) {
  const delay = el.dataset.index * 50;
  setTimeout(() => {
    el.style.opacity = 1;
    done();
  }, delay);
}

Catatan Performa

FLIP menganimasikan transform, yang ramah terhadap GPU. Jagalah ukuran daftar tetap wajar dan utamakan transformasi/opasitas daripada properti yang memicu tata letak, seperti width atau top, agar gerakan 60fps tetap mulus.

Pemeriksaan Singkat

Apa yang dimungkinkan oleh kelas list-move?

Ringkasan

Anda telah mempelajari <TransitionGroup> untuk daftar: render pembungkus dengan tag, berikan :key unik kepada setiap item, gunakan kelas enter/leave serta kelas -move untuk animasi pengurutan ulang berbasis FLIP, posisikan item yang keluar secara absolut, dan buat efek jeda bertahap dengan transitionDelay berbasis indeks.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “TransitionGroup untuk Animasi Daftar” gratis?

Ya — teks lengkap “TransitionGroup untuk Animasi Daftar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “TransitionGroup untuk Animasi Daftar”?

Menganimasikan daftar v-for, transisi perpindahan, animasi bertahap dengan jeda. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “TransitionGroup untuk Animasi Daftar” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy