Transisi dan Pengaturan Waktu
Animasikan perpindahan antarstate dengan transisi.
Transisi dan Pengaturan Waktu adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Perpindahan Keadaan
Keadaan menjelaskan di mana elemen berada; transisi menjelaskan bagaimana elemen berpindah di antara keadaan tersebut. Fungsi transition memasangkan perubahan keadaan dengan animasi.
Fungsi transition
transition menerima ekspresi perubahan keadaan dan satu atau beberapa langkah animasi.
transition('closed => open', animate('300ms'))Operator Arah
Gunakan => untuk satu arah dan <=> untuk kedua arah.
transition('open <=> closed', animate('250ms ease-in-out'))Fungsi animate
animate menentukan pengaturan waktu: durasi, penundaan opsional, dan easing. Format string-nya adalah "duration delay easing".
animate('500ms 100ms ease-out')Satuan Durasi
Durasi menerima ms atau s. Angka tanpa satuan dianggap sebagai milidetik.
animate('0.4s')
animate('400ms')
animate(400)Fungsi Easing
Easing mengatur percepatan: linear, ease, ease-in, ease-out, ease-in-out, atau cubic-bezier().
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')Gaya Target Sebaris
animate dapat menerima argumen style kedua untuk menganimasikan gaya yang tidak terikat pada keadaan bernama.
transition('* => active', [
animate('300ms', style({ transform: 'scale(1.1)' }))
])Beberapa Langkah
Teruskan larik langkah untuk menjalankan rangkaian dalam satu transisi.
transition('closed => open', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])Transisi Wildcard
Gunakan * untuk mencocokkan transisi dari atau ke keadaan apa pun, yang berguna untuk efek masuk umum.
transition('* => open', animate('200ms'))Gaya Awal
style() tanpa argumen sebelum animate() menetapkan titik awal, lalu Angular menganimasikan elemen menuju gaya keadaan tujuan.
transition(':enter', [
style({ opacity: 0 }),
animate('400ms', style({ opacity: 1 }))
])Praktik Terbaik Pengaturan Waktu
Jaga transisi antarmuka pengguna tetap singkat (150–300 md) agar responsif. Gunakan durasi yang lebih panjang untuk gerakan besar yang disengaja. Sesuaikan easing dengan nuansa yang Anda inginkan.
Pemeriksaan Singkat
Uji pemahaman Anda tentang transisi dan pengaturan waktu.
Ringkasan
Anda telah mempelajari bahwa transition menghubungkan perubahan keadaan (dengan => atau <=>) ke langkah animate. String pengaturan waktunya adalah duration delay easing, dan Anda dapat merangkai langkah style/animate untuk membuat rangkaian.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Transisi dan Pengaturan Waktu” gratis?
Ya — teks lengkap “Transisi dan Pengaturan Waktu” 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 “Transisi dan Pengaturan Waktu”?
Animasikan perpindahan antarstate dengan transisi. 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 2 dari 4.
Berapa lama pelajaran “Transisi dan Pengaturan Waktu” 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