Podstawy animacji: trigger i state
Definiować stany i wyzwalacze animacji
Podstawy animacji: trigger i state to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 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.
Animacje Angulara
System animacji Angulara to deklaratywny DSL oparty na Web Animations API. Opisuje się w nim stany i przejścia, a Angular zajmuje się synchronizacją czasu oraz aktualizacjami DOM.
Konfiguracja
Aby włączyć silnik animacji, należy udostępnić obsługę animacji w konfiguracji uruchamiania aplikacji.
bootstrapApplication(AppComponent, {
providers: [provideAnimationsAsync()]
});Funkcja trigger
Element trigger nadaje animacji nazwę oraz grupuje jej stany i przejścia. Przypisuje się go do elementu za pomocą wiązania.
animations: [
trigger('openClose', [
// states and transitions
])
]Definiowanie stanów
state wiąże nazwany stan z zestawem stylów CSS, które element powinien mieć w tym stanie.
state('open', style({ height: '200px', opacity: 1 })),
state('closed', style({ height: '0px', opacity: 0 }))Funkcja style
style przyjmuje obiekt właściwości CSS. Należy używać kluczy zapisanych w notacji camelCase lub nazw CSS ujętych w cudzysłowy.
style({ backgroundColor: '#1976d2', transform: 'scale(1)' })Powiązanie triggera
W szablonie należy powiązać @triggerName z wyrażeniem zwracającym bieżący stan.
<div [@openClose]="isOpen ? 'open' : 'closed'">
Content
</div>Kompletny trigger
Oto trigger z dwoma stanami i przejściem między nimi.
trigger('openClose', [
state('open', style({ height: '200px' })),
state('closed', style({ height: '0px' })),
transition('open <=> closed', animate('300ms ease'))
])Sterowanie stanem z poziomu komponentu
Komponent jedynie przełącza wartość logiczną lub tekstową, a Angular dobiera style odpowiadające pasującemu stanowi i płynnie przechodzi między nimi.
isOpen = signal(true);
toggle() { this.isOpen.update(v => !v); }Stan wieloznaczny
Symbol wieloznaczny * pasuje do dowolnego stanu. Jest przydatny w przypadku wartości domyślnych oraz animacji pojawiania się i znikania omawianych później.
state('*', style({ opacity: 1 }))Stan void
Specjalny stan void reprezentuje element, którego nie ma w DOM, i stanowi podstawę animacji pojawiania się oraz znikania.
Dlaczego animacje deklaratywne?
Animacje deklaratywne pozwalają utrzymać logikę synchronizacji czasu poza komponentami, integrują się z cyklem życia Angulara i automatycznie sprzątają po usunięciu elementów z DOM.
Szybki test
Sprawdź swoją wiedzę na temat podstaw animacji.
Podsumowanie
Dowiedziałeś się, że animacje Angulara używają elementu trigger zawierającego definicje state, z których każda mapuje nazwę na style, a w szablonie jest on powiązany za pomocą [@trigger]. Stany void i * obsługują odpowiednio brak stanu oraz dowolny stan.
Często zadawane pytania
Czy lekcja „Podstawy animacji: trigger i state” jest bezpłatna?
Tak — pełny tekst „Podstawy animacji: trigger i state” 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 „Podstawy animacji: trigger i state”?
Definiować stany i wyzwalacze animacji Ć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 1 z 4.
Ile czasu zajmuje lekcja „Podstawy animacji: trigger i state”?
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
- Podstawy animacji: trigger i state
- Przejścia i synchronizacja czasowa
- Animacje wejścia i wyjścia
- Klatki kluczowe i kaskadowanie