animate:flip untuk Mengurutkan Ulang Daftar
Animasikan item daftar dengan mulus saat urutannya berubah menggunakan teknik FLIP.
animate:flip untuk Mengurutkan Ulang Daftar adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Fungsi animate:flip
flip menganimasikan elemen dengan mulus ketika posisinya dalam blok each ber-kunci berubah.
Impor
Dari svelte/animate.
import { flip } from "svelte/animate";Terapkan pada Elemen
Terapkan pada elemen di dalam blok each ber-kunci.
{#each items as item (item.id)}
<li animate:flip>{item.name}</li>
{/each}Teknik FLIP
FLIP adalah singkatan dari posisi Pertama, posisi Terakhir, Pembalikan, dan Pemutaran. Svelte menghitung selisihnya lalu menganimasikannya dengan mulus menggunakan transformasi.
Each Ber-kunci Wajib
Animasi ini bergantung pada kunci untuk mengetahui node DOM mana yang sesuai dengan setiap elemen.
Parameter
Teruskan opsi { duration, delay, easing } seperti pada transisi.
<li animate:flip={{ duration: 300 }}>Pemicu Umum
Pengurutan ulang melalui seret dan lepas, pengurutan, pemfilteran, atau pengacakan.
Padukan dengan Transisi
Padukan dengan transition: untuk animasi masuk dan keluar di atas animasi pengurutan ulang.
Performa
Menggunakan transformasi CSS; tetap mulus bahkan untuk ratusan elemen.
Keterbatasan
Tidak dapat menganimasikan perpindahan lintas kontainer di antara blok each yang berbeda.
Gerakan Minimal
Lewati animasi jika pengguna memilih gerakan yang dikurangi demi aksesibilitas.
Pemeriksaan Singkat
Apa yang diperlukan oleh animate:flip?
Rangkuman
animate:flip menganimasikan pengurutan ulang daftar secara mulus di dalam blok each berkunci menggunakan teknik FLIP.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “animate:flip untuk Mengurutkan Ulang Daftar” gratis?
Ya — teks lengkap “animate:flip untuk Mengurutkan Ulang Daftar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “animate:flip untuk Mengurutkan Ulang Daftar”?
Animasikan item daftar dengan mulus saat urutannya berubah menggunakan teknik FLIP. Kamu berlatih Sveltejs 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 Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs 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 1 dari 4.
Berapa lama pelajaran “animate:flip untuk Mengurutkan Ulang 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 Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs 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
- animate:flip untuk Mengurutkan Ulang Daftar
- Store spring() dan tweened()
- Fungsi Easing Kustom
- Menggabungkan Transisi dan Animasi