Angular Academy · Lekcja

Animacje wejścia i wyjścia

Animować elementy pojawiające się i znikające

Animacje wejścia i wyjścia to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Animowanie pojawiania się elementów

Często zachodzi potrzeba animowania elementów w chwili ich pojawiania się lub znikania, na przykład gdy element jest dodawany do listy albo z niej usuwany. Angular udostępnia do tego aliasy :enter i :leave.

void i obecność

Elementu nieobecnego w DOM dotyczy stan void. Pojawianie się oznacza void => *, a znikanie — * => void.

:enter — alias

:enter jest skrótem dla void => *. Należy go używać do animowania elementów podczas ich dodawania.

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

:leave — alias

:leave jest skrótem dla * => void. Angular pozostawia element w DOM do czasu zakończenia animacji znikania.

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

Uruchamianie za pomocą sterowania przepływem

Trigger należy zastosować do elementów zarządzanych przez @if lub @for. Ich dodanie lub usunięcie uruchamia animację pojawiania się lub znikania.

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

Trigger efektu fade

Oto wielokrotnego użytku trigger efektu pojawiania się i zanikania.

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

Przykład wsuwania

Połączenie właściwości transform i opacity pozwala uzyskać efekt wsuwania elementu podczas jego pojawiania się.

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

Animacje elementów listy

Trigger należy umieścić na każdym elemencie wewnątrz @for; dodanie lub usunięcie elementu animuje go niezależnie od pozostałych.

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

Dlaczego znikanie wymaga silnika

W normalnych warunkach usuwany element znika natychmiast. Silnik animacji przechwytuje usunięcie, zatrzymuje węzeł, uruchamia animację :leave, a następnie go usuwa — wszystko automatycznie.

Wyłączanie animacji

Wiązanie @.disabled pozwala warunkowo pomijać animacje, co jest przydatne w przypadku ustawień ograniczania ruchu lub początkowego renderowania.

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

Dobre praktyki

Animacje pojawiania się i znikania powinny być krótkie i subtelne. Należy respektować ustawienie prefers-reduced-motion. Dla płynności warto animować właściwości transform i opacity, przyjazne dla GPU, zamiast właściwości układu.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat animacji wejścia i wyjścia.

Podsumowanie

Dowiedział się Pan/Dowiedziała się Pani, że :enter (void => *) i :leave (* => void) animują elementy podczas ich dodawania i usuwania, współpracując z @if/@for. Silnik przetrzymuje usuwane węzły do momentu zakończenia ich animacji.

Często zadawane pytania

Czy lekcja „Animacje wejścia i wyjścia” jest bezpłatna?

Tak — pełny tekst „Animacje wejścia i wyjścia” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Animacje wejścia i wyjścia”?

Animować elementy pojawiające się i znikające Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Animacje wejścia i wyjścia”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy