Latihan 1: Animations Svelte — Svelte

Latihan 1 dari materi Animations Svelte di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah punya let items = [1, 2, 3, 4, 5], function shuffle() yang menjalankan items = items.sort(() => Math.random() - 0.5), tombol <button on:click={shuffle}>Acak</button>, dan {#each items as item (item)} berisi <div>{item}</div>. Biarkan semuanya.

Di <script>, impor helper animasinya: import { flip } from "svelte/animate".
Pasang directive animasinya di <div> dalam blok each, dengan durasi 300 ms: <div animate:flip={{ duration: 300 }}>{item}</div>.

Yang dicek:

Kodemu menyebut animate:flip. Tulisan di dalam komentar gak dihitung.
Halaman punya minimal 5 <div>, satu per angka.
Halaman punya <button>, dan kodemu masih memakai on:click.
Urutannya benar-benar diubah oleh kodemu: ada sort(, reverse(, atau shuffle (kode awal sudah punya sort( dan shuffle).
animate:flip diberi durasi 300 ms: animate:flip={{ duration: 300 }}.

Hint

animate:flip menghaluskan perpindahan posisi tiap item saat urutan daftarnya berubah, dan cuma boleh dipakai di dalam each yang punya key.
Impor flip dari svelte/animate, lalu pasang animate:flip dengan objek parameter di div yang langsung berada di dalam {#each items as item (item)}.
import { flip } from "svelte/animate" lalu {#each items as item (item)} <div animate:flip={{ duration: 300 }}>{item}</div> {/each}

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Animations Svelte — Svelte

Hint

Memperbarui Aplikasi