Parameter Transisi: duration delay easing
Sesuaikan transisi dengan meneruskan parameter duration, delay, dan easing.
Parameter Transisi: duration delay easing adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Objek Parameter
Semua transisi menerima objek opsi sebagai argumen kedua.
<p transition:fade={{ duration: 600, delay: 200 }}>Durasi
Panjang total animasi dalam milidetik. Nilai bawaan 400 ms.
Penundaan
Tunggu sebelum memulai animasi. Berguna untuk antarmuka yang dijalankan secara berurutan.
Penghalusan
Fungsi yang memetakan kemajuan linear (0..1) ke kurva khusus. Nilai bawaan adalah linear.
Fungsi Penghalusan Bawaan
Impor dari svelte/easing: linear, quadIn, cubicOut, elasticOut, dan sebagainya.
import { elasticOut } from "svelte/easing";Opsi per Transisi
Setiap transisi memiliki parameternya sendiri. Fly menambahkan x dan y; scale menambahkan start.
Memilih Durasi
Gunakan durasi singkat (100–200 ms) untuk interaksi mikro dan durasi lebih panjang (400–700 ms) untuk transisi halaman.
Parameter Reaktif
Nilai parameter dapat bergantung pada keadaan reaktif.
<p transition:fly={{ x: dir * 200 }}>...Perilaku Bawaan
Jika Anda menghilangkan objek parameter, nilai bawaan yang sesuai akan diterapkan.
Sesuaikan dengan Desain
Sesuaikan durasi dan penghalusan sampai gerakannya terasa tepat; uji pada perangkat nyata.
Aksesibilitas
Hormati prefers-reduced-motion dengan mengurangi durasi atau melewati transisi.
Pemeriksaan Singkat
Dari mana fungsi penghalusan berasal?
Ringkasan
Sesuaikan duration, delay, dan easing (dari svelte/easing) agar gerakannya terasa tepat.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Parameter Transisi: duration delay easing” gratis?
Ya — teks lengkap “Parameter Transisi: duration delay easing” 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 “Parameter Transisi: duration delay easing”?
Sesuaikan transisi dengan meneruskan parameter duration, delay, dan easing. 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 2 dari 4.
Berapa lama pelajaran “Parameter Transisi: duration delay easing” 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