Menulis Fungsi Transisi Kustom
Kembalikan fungsi CSS atau tick dari transisi kustom untuk menganimasikan masuk dan keluarnya DOM.
Menulis Fungsi Transisi Kustom 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 Kustom
Selain yang sudah tersedia, Anda dapat menulis fungsi transisi yang sepenuhnya kustom.
Tanda Tangan Fungsi
Fungsi transisi menerima (node, params) dan mengembalikan objek opsi.
function spin(node) {
return {
duration: 600,
css: (t) => `transform: rotate(${t * 360}deg); opacity: ${t};`
};
}Gunakan Transisi Anda
Terapkan dengan transition:spin pada elemen mana pun.
Fungsi CSS
Kembalikan fungsi css(t, u). t bergerak dari 0 hingga 1; u bergerak dari 1 hingga 0.
Fungsi JS (per pembaruan)
Untuk nilai yang tidak dapat dianimasikan oleh CSS, kembalikan fungsi tick.
tick: (t) => node.textContent = Math.floor(t * 100) + "%";Kapan Menggunakan CSS atau Pembaruan
CSS lebih cepat (dipercepat GPU). Gunakan pembaruan hanya saat perubahan tidak dapat dinyatakan dengan CSS.
Pelicinan
Terapkan pelicinan di dalam fungsi Anda atau terima pelicinan sebagai parameter.
Jeda dan Durasi
Kembalikan delay dan duration dalam objek opsi.
Pustaka yang Dapat Digunakan Kembali
Buat modul transisi untuk sistem desain Anda.
Kesadaran Arah
Kerangka kerja memanggil fungsi Anda saat elemen masuk; arah yang berlawanan digunakan saat elemen keluar.
Gabungkan dengan in/out
Anda dapat menggunakan satu fungsi kustom untuk masuk dan fungsi lain untuk keluar melalui in: dan out:.
Pemeriksaan Singkat
Apa yang diterima fungsi css dalam sebuah transisi?
Rangkuman
Tentukan transisi kustom dengan mengembalikan { duration, css } atau { duration, tick } dari sebuah fungsi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menulis Fungsi Transisi Kustom” gratis?
Ya — teks lengkap “Menulis Fungsi Transisi Kustom” 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 “Menulis Fungsi Transisi Kustom”?
Kembalikan fungsi CSS atau tick dari transisi kustom untuk menganimasikan masuk dan keluarnya DOM. 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 “Menulis Fungsi Transisi Kustom” 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
- Menulis Fungsi Transisi Kustom
- Parameter Transisi: node duration delay
- Membuat Transisi Morfing
- Transisi CSS vs JavaScript