Latihan 1 dari materi Animations Angular di Angular — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Bikin paragraf yang memudar saat muncul dan saat hilang, dengan animate.enter dan animate.leave (Angular 20.2 ke atas). Starter-nya sudah punya tombol <button (click)="show = !show">Toggle</button>, show = true, dan dua @keyframes di styles: fade-in dan fade-out. Biarkan semuanya, lalu:
show bernilai true, dengan class untuk masuk dan keluarnya:@if (show) {
<p animate.enter="fade-in" animate.leave="fade-out">Animasi fade</p>
}
styles, sambungkan tiap class ke keyframes-nya:.fade-in {
animation: fade-in 300ms ease-in;
}
.fade-out {
animation: fade-out 300ms ease-out forwards;
}
animate.enter memasang class fade-in saat paragrafnya masuk ke DOM, lalu melepasnya setelah animasinya selesai. animate.leave memasang fade-out saat paragrafnya harus keluar, dan Angular menahannya di DOM sampai animasi itu selesai. forwards menahan opacity 0 di akhir sampai paragrafnya dibuang. Gak perlu import atau provider apa pun.
Yang dicek:
animate.enter dan animate.leave, dan <p> tampil di awal.Toggle diklik, paragrafnya masih ada dengan class fade-out dan animasinya sedang berjalan. Setelah animasinya selesai, paragrafnya hilang.Toggle diklik dua kali, paragrafnya kembali dengan teks persis Animasi fade, dan class fade-in-nya sedang beranimasi.
