Dasar-Dasar Animasi: trigger dan state
Definisikan state dan trigger animasi.
Dasar-Dasar Animasi: trigger dan state adalah pelajaran Angular 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 Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Animasi Angular
Sistem animasi Angular adalah DSL deklaratif yang dibangun di atas Web Animations API. Anda menjelaskan keadaan dan transisi, lalu Angular menangani pengaturan waktu dan pembaruan DOM.
Penyiapan
Sediakan animasi dalam konfigurasi bootstrap Anda untuk mengaktifkan mesin animasi.
bootstrapApplication(AppComponent, {
providers: [provideAnimationsAsync()]
});Pemicu trigger
trigger memberi nama pada animasi serta mengelompokkan keadaan dan transisinya. Anda memasangkannya ke elemen melalui pengikatan.
animations: [
trigger('openClose', [
// states and transitions
])
]Mendefinisikan Keadaan
state mengikat keadaan bernama ke sekumpulan gaya CSS yang harus dimiliki elemen saat berada dalam keadaan tersebut.
state('open', style({ height: '200px', opacity: 1 })),
state('closed', style({ height: '0px', opacity: 0 }))Fungsi style
style menerima objek berisi properti CSS. Gunakan kunci camelCase atau nama CSS yang diapit tanda kutip.
style({ backgroundColor: '#1976d2', transform: 'scale(1)' })Mengikat Pemicu
Dalam templat, ikat @triggerName ke ekspresi yang mengembalikan keadaan saat ini.
<div [@openClose]="isOpen ? 'open' : 'closed'">
Content
</div>Pemicu Lengkap
Berikut contoh pemicu dengan dua keadaan dan transisi di antara keduanya.
trigger('openClose', [
state('open', style({ height: '200px' })),
state('closed', style({ height: '0px' })),
transition('open <=> closed', animate('300ms ease'))
])Mengendalikan Keadaan dari Komponen
Komponen hanya mengubah nilai boolean atau string; Angular melakukan interpolasi antara gaya keadaan yang sesuai.
isOpen = signal(true);
toggle() { this.isOpen.update(v => !v); }Keadaan Wildcard
Wildcard * cocok dengan keadaan apa pun dan berguna untuk default serta animasi masuk/keluar yang akan dibahas nanti.
state('*', style({ opacity: 1 }))Keadaan Void
Keadaan khusus void mewakili elemen yang tidak berada di dalam DOM dan menjadi dasar animasi masuk serta keluar.
Mengapa Animasi Deklaratif?
Animasi deklaratif menjaga logika pengaturan waktu tetap berada di luar komponen, terintegrasi dengan siklus hidup Angular, dan otomatis membersihkan elemen saat keluar dari DOM.
Pemeriksaan Singkat
Uji pemahaman Anda tentang dasar-dasar animasi.
Ringkasan
Anda telah mempelajari bahwa animasi Angular menggunakan trigger yang berisi definisi state (masing-masing memetakan nama ke style), lalu diikat dalam templat melalui [@trigger]. Keadaan void dan * mencakup keadaan tidak ada dan keadaan apa pun.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Dasar-Dasar Animasi: trigger dan state” gratis?
Ya — teks lengkap “Dasar-Dasar Animasi: trigger dan state” 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 “Dasar-Dasar Animasi: trigger dan state”?
Definisikan state dan trigger animasi. 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 1 dari 4.
Berapa lama pelajaran “Dasar-Dasar Animasi: trigger dan state” 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