Angular Academy · Ders

Giriş ve Çıkış Animasyonları

Ögelerin giriş ve çıkışına animasyon uygulayın

Giriş ve Çıkış Animasyonları, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. 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.

Varlığı Canlandırma

Örneğin bir öğe listeye eklendiğinde veya listeden kaldırıldığında, öğelerin genellikle görünürken ya da kaybolurken canlandırılmasını istersiniz. Angular bunun için :enter ve :leave takma adlarını sunar.

void ve Varlık

DOM'da bulunmayan bir öğe void durumundadır. Giriş void => *, çıkış ise * => void anlamına gelir.

:enter Takma Adı

:enter, void => * ifadesinin kısa biçimidir. Öğeler eklenirken animasyon uygulamak için kullanın.

transition(':enter', [
  style({ opacity: 0 }),
  animate('300ms', style({ opacity: 1 }))
])

:leave Takma Adı

:leave, * => void ifadesinin kısa biçimidir. Angular, çıkış animasyonu tamamlanana kadar öğeyi DOM'da tutar.

transition(':leave', [
  animate('300ms', style({ opacity: 0 }))
])

Denetim Akışıyla Tetikleme

Tetikleyiciyi @if veya @for tarafından yönetilen öğelere uygulayın. Bu öğelerin eklenmesi veya kaldırılması giriş/çıkış animasyonunu tetikler.

@if (visible()) {
  <div [@fade]>Hello</div>
}

Bir Solma Tetikleyicisi

İşte yeniden kullanılabilir bir görünme/kaybolma tetikleyicisi.

trigger('fade', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('200ms', style({ opacity: 1 }))
  ]),
  transition(':leave', [
    animate('200ms', style({ opacity: 0 }))
  ])
])

Kayarak Giriş Örneği

Girişte kayarak gelme efekti oluşturmak için dönüşümü ve opaklığı birleştirin.

transition(':enter', [
  style({ transform: 'translateY(-10px)', opacity: 0 }),
  animate('250ms ease-out',
    style({ transform: 'translateY(0)', opacity: 1 }))
])

Liste Öğesi Animasyonları

Tetikleyiciyi @for içindeki her öğeye yerleştirin; öğelerin eklenmesi veya kaldırılması her birini bağımsız olarak canlandırır.

@for (item of items(); track item.id) {
  <li [@fade]>{{ item.name }}</li>
}

Çıkış İçin Motor Neden Gereklidir?

Normalde kaldırılan bir öğe anında kaybolur. Animasyon motoru kaldırma işlemini yakalar, düğümü tutar, :leave animasyonunu çalıştırır ve ardından öğeyi otomatik olarak kaldırır.

Animasyonları Devre Dışı Bırakma

Animasyonları koşullu olarak atlamak için @.disabled bağlamasını kullanın; bu, azaltılmış hareket tercihleri veya ilk görüntüleme için yararlıdır.

<div [@.disabled]="prefersReducedMotion">...</div>

En İyi Uygulamalar

Giriş ve çıkış animasyonlarını kısa ve ölçülü tutun. prefers-reduced-motion tercihlerine saygı gösterin. Akıcı sonuç için düzen özellikleri yerine dönüşümü ve opaklığı (GPU dostu) canlandırın.

Hızlı Kontrol

Giriş/çıkış animasyonlarını anlayıp anlamadığınızı test edin.

Özet

:enter (void => *) ve :leave (* => void) ifadelerinin, @if/@for ile birlikte çalışarak öğeler eklenirken ve kaldırılırken onları canlandırdığını öğrendiniz. Motor, ayrılan düğümleri animasyonları tamamlanana kadar tutar.

Sıkça Sorulan Sorular

“Giriş ve Çıkış Animasyonları” dersi ücretsiz mi?

Evet — “Giriş ve Çıkış Animasyonları” 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.

“Giriş ve Çıkış Animasyonları” dersinde ne öğreneceğim?

Ögelerin giriş ve çıkışına 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 3. dersidir.

“Giriş ve Çıkış Animasyonları” 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

← Angular Academy Sayfasına Dön