transition:fade dan transition:fly
Terapkan transisi fade dan fly bawaan pada elemen yang dikendalikan oleh {#if}.
transition:fade dan transition:fly 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.
Transisi Bawaan
Svelte menyediakan beberapa transisi dalam svelte/transition: fade, fly, slide, scale, blur, dan draw.
Impor Transisi
Impor transisi yang Anda perlukan.
import { fade, fly } from "svelte/transition";Terapkan dengan transition:
Terapkan dengan transition: pada elemen yang dikendalikan oleh {#if}.
{#if visible}
<p transition:fade>Hello</p>
{/if}Transisi Fly
Transisi fly memindahkan elemen dari ofset koordinat ke posisinya.
{#if visible}
<div transition:fly={{ x: -200, duration: 400 }}>Slide in</div>
{/if}Objek Parameter
Teruskan opsi seperti x, y, duration, delay, dan easing.
Kapan Pemicu Berjalan
Transisi berjalan saat pemasangan dan pelepasan elemen di dalam blok {#if}, {#each}, atau {#await}.
Gabungkan Transisi
Terapkan satu transisi untuk setiap direktif. Gunakan in: dan out: untuk transisi asimetris.
UX yang Mulus
Transisi membuat antarmuka terasa lebih rapi tanpa harus menulis bingkai utama secara manual.
Performa
Transisi bawaan menggunakan CSS jika memungkinkan untuk akselerasi GPU.
Gerakan yang Dikurangi
Hormati prefers-reduced-motion dengan menerapkan transisi secara kondisional.
Penghalusan Gerak
Teruskan fungsi penghalusan dari svelte/easing untuk gerakan yang lebih menarik.
import { cubicOut } from "svelte/easing";
<p transition:fade={{ easing: cubicOut }}>...</p>Pemeriksaan Singkat
Di mana transisi berjalan?
Ringkasan
Impor dari svelte/transition; terapkan dengan transition:; teruskan objek parameter untuk mengendalikannya.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “transition:fade dan transition:fly” gratis?
Ya — teks lengkap “transition:fade dan transition:fly” 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 “transition:fade dan transition:fly”?
Terapkan transisi fade dan fly bawaan pada elemen yang dikendalikan oleh {#if}. 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 “transition:fade dan transition:fly” 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
- transition:fade dan transition:fly
- Parameter Transisi: duration delay easing
- in: dan out: untuk Transisi Asimetris
- transition:draw untuk Jalur SVG