Latihan 2: Transitions Svelte — Svelte

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

Kode awal cuma berisi <script> dan komentar TODO. Tulis komponennya:

Di <script>: import { fly } from "svelte/transition" dan let visible = true.
Tombol bertulisan persis Toggle yang membalik visible: <button on:click={() => (visible = !visible)}>Toggle</button>. Penguji mencari tombolnya lewat tulisan itu.
Blok {#if visible} berisi <p transition:fly={{ y: -50, duration: 400 }}>Terbang dari atas!</p>, lalu {/if}.

Yang dicek:

Kodemu menyebut fly dan transition:. Tulisan di dalam komentar gak dihitung.
Halaman punya <button> dan <p>, dan teks <p> memuat Terbang dari atas.
Kodemu memakai on:click dan {#if.
Setelah tombol Toggle diklik, gak ada <p> lagi di halaman. Penguji menunggu sekitar satu detik.
Transisinya transition:fly={{ y: -50, duration: 400 }}: datang dari atas, selama 400 ms.

Hint

Transisi bawaan Svelte cuma jalan saat elemen benar-benar dipasang dan dilepas, jadi butuh satu boolean yang dibalik tombolnya dan blok {#if} yang membungkus paragrafnya.
Impor fly dari svelte/transition, buat tombol Toggle dengan on:click yang membalik visible, lalu beri paragrafnya transition:fly dengan objek parameter di kurung kurawal ganda.
<button on:click={() => (visible = !visible)}>Toggle</button> {#if visible} <p transition:fly={{ y: -50, duration: 400 }}>Terbang dari atas!</p> {/if}

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Transitions Svelte — Svelte

Hint

Memperbarui Aplikasi