in: dan out: untuk Transisi Asimetris
Tentukan transisi yang berbeda untuk elemen saat masuk dan keluar.
in: dan out: untuk Transisi Asimetris adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Mengapa Asimetris
Terkadang Anda menginginkan animasi yang berbeda saat elemen masuk dan saat elemen keluar.
Direktif in:
Terapkan transisi hanya saat elemen disisipkan.
<p in:fly={{ y: 50 }}>Enter</p>Direktif out:
Terapkan transisi hanya saat elemen dihapus.
<p out:fade>Leave</p>Gabungkan Keduanya
Gunakan kedua direktif pada satu elemen untuk animasi masuk dan keluar yang sepenuhnya kustom.
<p in:fly={{ y: 50 }} out:fade={{ duration: 200 }}>...</p>Fungsi yang Berbeda
Transisi masuk dan keluar dapat sepenuhnya menggunakan fungsi yang berbeda (fly dan fade).
Parameter yang Berbeda
Teruskan durasi, penundaan, atau penghalusan yang berbeda untuk setiap arah.
Gunakan dalam Blok #if
Elemen harus dibuat atau dihapus secara reaktif, seperti pada transisi biasa.
Hindari transition: Bersama in:/out:
Pilih transition: untuk transisi simetris atau in:/out: untuk transisi asimetris. Mencampurnya menyebabkan konflik.
Contoh Nyata
Notifikasi singkat dapat masuk dari atas dengan efek fly dan memudar di tempatnya.
<div in:fly={{ y: -50 }} out:fade>{message}</div>Performa
Setiap transisi menggunakan CPU. Gunakan secara hemat pada daftar besar.
Pola Ringkasan
Transisi asimetris adalah cara cepat untuk memperhalus antarmuka—elemen yang masuk terasa mengundang, sedangkan elemen yang keluar terasa cepat.
Pemeriksaan Singkat
Apa perbedaan in: dan out:?
Ringkasan
Gunakan in: untuk elemen yang masuk dan out: untuk elemen yang keluar. Gabungkan keduanya untuk transisi asimetris yang rapi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “in: dan out: untuk Transisi Asimetris” gratis?
Ya — teks lengkap “in: dan out: untuk Transisi Asimetris” 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 “in: dan out: untuk Transisi Asimetris”?
Tentukan transisi yang berbeda untuk elemen saat masuk dan keluar. 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 3 dari 4.
Berapa lama pelajaran “in: dan out: untuk Transisi Asimetris” 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