Animasi Masuk dan Keluar
Animasikan elemen saat masuk dan keluar.
Animasi Masuk dan Keluar adalah pelajaran Angular 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 Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Menganimasikan Kehadiran
Sering kali Anda ingin elemen dianimasikan saat muncul atau menghilang, misalnya ketika item ditambahkan ke atau dihapus dari daftar. Angular menyediakan alias :enter dan :leave untuk tujuan ini.
void dan Kehadiran
Elemen yang tidak berada di dalam DOM berada dalam keadaan void. Masuk berarti void => *, sedangkan keluar berarti * => void.
Alias :enter
:enter adalah singkatan dari void => *. Gunakan untuk menganimasikan elemen saat ditambahkan.
transition(':enter', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])Alias :leave
:leave adalah singkatan dari * => void. Angular mempertahankan elemen di dalam DOM hingga animasi keluar selesai.
transition(':leave', [
animate('300ms', style({ opacity: 0 }))
])Memicu dengan Alur Kontrol
Terapkan pemicu pada elemen yang dikelola oleh @if atau @for. Menambahkan atau menghapusnya akan memicu animasi masuk/keluar.
@if (visible()) {
<div [@fade]>Hello</div>
}Pemicu Pudar
Berikut pemicu pudar masuk/keluar yang dapat digunakan kembali.
trigger('fade', [
transition(':enter', [
style({ opacity: 0 }),
animate('200ms', style({ opacity: 1 }))
]),
transition(':leave', [
animate('200ms', style({ opacity: 0 }))
])
])Contoh Geser Masuk
Gabungkan transformasi dan opasitas untuk menghasilkan efek geser masuk saat elemen muncul.
transition(':enter', [
style({ transform: 'translateY(-10px)', opacity: 0 }),
animate('250ms ease-out',
style({ transform: 'translateY(0)', opacity: 1 }))
])Animasi Item Daftar
Tempatkan pemicu pada setiap item di dalam @for; penambahan atau penghapusan item akan menganimasikan masing-masing item secara independen.
@for (item of items(); track item.id) {
<li [@fade]>{{ item.name }}</li>
}Mengapa Keluar Memerlukan Mesin
Biasanya elemen yang dihapus langsung menghilang. Mesin animasi mencegat penghapusan, menahan simpul, menjalankan animasi :leave, lalu menghapusnya, semuanya secara otomatis.
Menonaktifkan Animasi
Ikat @.disabled untuk melewati animasi secara kondisional, yang berguna untuk preferensi gerakan yang dikurangi atau perenderan awal.
<div [@.disabled]="prefersReducedMotion">...</div>Praktik Terbaik
Jaga animasi masuk/keluar tetap singkat dan halus. Hormati prefers-reduced-motion. Animasikan transformasi dan opasitas (ramah GPU), bukan properti tata letak, agar tetap mulus.
Pemeriksaan Singkat
Uji pemahaman Anda tentang animasi masuk dan keluar.
Ringkasan
Anda telah mempelajari bahwa :enter (void => *) dan :leave (* => void) menganimasikan elemen saat elemen tersebut ditambahkan dan dihapus, serta bekerja dengan @if/@for. Mesin menahan simpul yang sedang keluar hingga animasinya selesai.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Animasi Masuk dan Keluar” gratis?
Ya — teks lengkap “Animasi Masuk dan Keluar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Animasi Masuk dan Keluar”?
Animasikan elemen saat masuk dan keluar. Kamu berlatih Angular 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 Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular 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 “Animasi Masuk dan Keluar” 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 Angular Academy ini?
Ya. Setiap pelajaran Angular 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
- Dasar-Dasar Animasi: trigger dan state
- Transisi dan Pengaturan Waktu
- Animasi Masuk dan Keluar
- Keyframe dan Pengaturan Jeda