Animasyonun Temelleri: trigger ve state
Animasyon durumlarını ve tetikleyicilerini tanımlayın
Animasyonun Temelleri: trigger ve state, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
Angular Animasyonları
Angular'ın animasyon sistemi, Web Animations API üzerine kurulmuş bildirimsel bir DSL'dir. Durumları ve geçişleri tanımlarsınız; zamanlamayı ve DOM güncellemelerini Angular yönetir.
Kurulum
Animasyon motorunu etkinleştirmek için önyükleme yapılandırmanızda animasyonları sağlayın.
bootstrapApplication(AppComponent, {
providers: [provideAnimationsAsync()]
});trigger
Bir trigger, bir animasyonu adlandırır ve animasyonun durumlarıyla geçişlerini gruplar. Bir bağlama aracılığıyla bunu bir öğeye eklersiniz.
animations: [
trigger('openClose', [
// states and transitions
])
]Durumları Tanımlama
state, adlandırılmış bir durumu, öğenin o durumdayken sahip olması gereken bir CSS stili kümesine bağlar.
state('open', style({ height: '200px', opacity: 1 })),
state('closed', style({ height: '0px', opacity: 0 }))style İşlevi
style, CSS özelliklerinden oluşan bir nesne alır. camelCase anahtarları veya tırnak içine alınmış CSS adlarını kullanın.
style({ backgroundColor: '#1976d2', transform: 'scale(1)' })Tetikleyiciyi Bağlama
Şablonda @triggerName ifadesini geçerli durumu döndüren bir ifadeye bağlayın.
<div [@openClose]="isOpen ? 'open' : 'closed'">
Content
</div>Eksiksiz Bir Tetikleyici
İşte iki duruma ve bunların arasında bir geçişe sahip bir tetikleyici.
trigger('openClose', [
state('open', style({ height: '200px' })),
state('closed', style({ height: '0px' })),
transition('open <=> closed', animate('300ms ease'))
])Durumu Bileşenden Yönetme
Bileşen yalnızca bir boole veya dize değerini değiştirir; Angular, eşleşen durum stilleri arasında geçişi gerçekleştirir.
isOpen = signal(true);
toggle() { this.isOpen.update(v => !v); }Joker Durum
Joker karakter *, tüm durumlarla eşleşir; varsayılanlar ve ileride ele alınacak giriş/çıkış animasyonları için kullanışlıdır.
state('*', style({ opacity: 1 }))void Durumu
Özel void durumu, DOM'da bulunmayan bir öğeyi temsil eder ve girişle çıkış animasyonlarının temelini oluşturur.
Bildirimsel Animasyonlar Neden Kullanılır?
Bildirimsel animasyonlar zamanlama mantığını bileşenlerin dışında tutar, Angular'ın yaşam döngüsüyle bütünleşir ve öğeler DOM'dan ayrıldığında temizliği otomatik olarak yapar.
Hızlı Kontrol
Animasyon temelleri anlayışınızı sınayın.
Özet
Angular animasyonlarının, state tanımlarını içeren bir trigger kullandığını (her tanım bir adı style ile eşler) ve bunun şablonda [@trigger] aracılığıyla bağlandığını öğrendiniz. void ve * durumları, mevcut olmayan ve tüm durumları kapsar.
Sıkça Sorulan Sorular
“Animasyonun Temelleri: trigger ve state” dersi ücretsiz mi?
Evet — “Animasyonun Temelleri: trigger ve state” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“Animasyonun Temelleri: trigger ve state” dersinde ne öğreneceğim?
Animasyon durumlarını ve tetikleyicilerini tanımlayın Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Animasyonun Temelleri: trigger ve state” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Animasyonun Temelleri: trigger ve state
- Geçişler ve Zamanlama
- Giriş ve Çıkış Animasyonları
- Anahtar Kareler ve Kademelendirme