Geçişler ve Zamanlama
Geçişlerle durumlar arasında animasyon uygulayın
Geçişler ve Zamanlama, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. 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.
Durumlar Arasında Animasyon
Durumlar, öğenin nerede durduğunu; geçişler ise aralarında nasıl hareket ettiğini tanımlar. transition işlevi, durum değişikliğini bir animasyonla eşleştirir.
transition İşlevi
transition, bir durum değişikliği ifadesiyle bir veya daha fazla animasyon adımı alır.
transition('closed => open', animate('300ms'))Yön İşleçleri
Tek yön için =>, her iki yön için <=> kullanın.
transition('open <=> closed', animate('250ms ease-in-out'))animate İşlevi
animate zamanlamayı tanımlar: süre, isteğe bağlı gecikme ve yumuşatma. Dize biçimi "duration delay easing" şeklindedir.
animate('500ms 100ms ease-out')Süre Birimleri
Süreler ms veya s kabul eder. Birimsiz sayı milisaniye olarak değerlendirilir.
animate('0.4s')
animate('400ms')
animate(400)Yumuşatma İşlevleri
Yumuşatma hızlanmayı denetler: linear, ease, ease-in, ease-out, ease-in-out veya bir cubic-bezier().
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')Satır İçi Hedef Stilleri
animate, adlandırılmış bir duruma bağlı olmayan stillere doğru animasyon uygulamak için ikinci bir style bağımsız değişkeni alabilir.
transition('* => active', [
animate('300ms', style({ transform: 'scale(1.1)' }))
])Birden Çok Adım
Tek bir geçiş içinde bir dizi çalıştırmak için adımlardan oluşan bir dizi geçirin.
transition('closed => open', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])Joker Geçişler
Herhangi bir durumdan veya herhangi bir duruma geçişlerle eşleşmek için * kullanın; bu, genel giriş efektleri için kullanışlıdır.
transition('* => open', animate('200ms'))Başlangıç Stilleri
animate() öncesindeki bağımsız style(), başlangıç noktasını ayarlar; ardından Angular hedef durumun stillerine animasyon uygular.
transition(':enter', [
style({ opacity: 0 }),
animate('400ms', style({ opacity: 1 }))
])Zamanlama İçin En İyi Uygulamalar
Hızlı yanıt için kullanıcı arayüzü geçişlerini kısa tutun (150-300 ms). Daha uzun süreleri büyük ve bilinçli hareketlere ayırın. Yumuşatmayı istediğiniz hisle eşleştirin.
Hızlı Kontrol
Geçişler ve zamanlama anlayışınızı sınayın.
Özet
transition işlevinin durum değişikliklerini (=> veya <=> ile) animate adımlarına bağladığını öğrendiniz. Zamanlama dizesi duration delay easing biçimindedir ve diziler için style/animate adımlarını zincirleyebilirsiniz.
Sıkça Sorulan Sorular
“Geçişler ve Zamanlama” dersi ücretsiz mi?
Evet — “Geçişler ve Zamanlama” 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.
“Geçişler ve Zamanlama” dersinde ne öğreneceğim?
Geçişlerle durumlar arasında animasyon uygulayı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 2. dersidir.
“Geçişler ve Zamanlama” 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