Transisi Daftar FLIP — v1.3.1
FLIP transitions (enter/leave/move) opt-in via `dengan transisi <nama>` di atas keyed list. Tambah item (enter), hapus item (leave), acak urutan (move) — animasi via CSS class, tanpa vDOM, zero eval, CSP-safe.
FLIP
transisi
dengan transisi
keyed diff
animasi
list-transitions.pjs
---
judul: Transisi Daftar FLIP — v1.3.1
description: Demo FLIP transitions (enter/leave/move) pada keyed list. Tambah item (enter), hapus item (leave), acak urutan (move) — semua via CSS class, tanpa vDOM, zero eval.
---
Halaman DemoTransisi:
data items = []
data idCounter = 0
data inputNama = ""
Buat div .demo-controls:
Buat masukan #inputNama .input-nama:
ikat = inputNama
Buat tombol #btnTambah .btn-tambah: "Tambah"
Ketika diklik:
Jika panjang(inputNama) > 0:
tambahkan { id: idCounter, label: inputNama } ke items
simpan idCounter + 1 ke idCounter
simpan "" ke inputNama
Buat tombol #btnAcak .btn-acak: "Acak Urutan"
Ketika diklik:
simpan items ke items
Buat ul #daftar .daftar-transisi:
Ulangi untuk item dari $items dengan kunci item.id dengan transisi fade:
Buat li .item-baris:
Buat span .item-label: item.label
Buat tombol .btn-hapus: "×"
Ketika diklik:
simpan items ke items
Live Preview
2 warning(s) dari compiler
W4101Simbol "judul" dideklarasikan tetapi tidak pernah digunakan.W4101Simbol "description" dideklarasikan tetapi tidak pernah digunakan.