Przejścia i synchronizacja czasowa
Animować przejścia między stanami
Przejścia i synchronizacja czasowa to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 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 przejść między stanami
Stany opisują, gdzie element pozostaje, a przejścia opisują, jak się między nimi porusza. Funkcja transition łączy zmianę stanu z animacją.
Funkcja transition
transition przyjmuje wyrażenie zmiany stanu oraz jeden lub więcej kroków animacji.
transition('closed => open', animate('300ms'))Operatory kierunku
Należy użyć => dla jednego kierunku oraz <=> dla obu kierunków.
transition('open <=> closed', animate('250ms ease-in-out'))Funkcja animate
animate definiuje parametry czasowe: czas trwania, opcjonalne opóźnienie i funkcję easing. Format ciągu to "duration delay easing".
animate('500ms 100ms ease-out')Jednostki czasu trwania
Czas trwania może być podany w jednostkach ms lub s. Sama liczba jest traktowana jako liczba milisekund.
animate('0.4s')
animate('400ms')
animate(400)Funkcje easing
Easing określa sposób przyspieszania: linear, ease, ease-in, ease-out, ease-in-out lub cubic-bezier().
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')Wbudowane style docelowe
animate może przyjąć drugi argument style, aby animować element w kierunku stylów, które nie są powiązane z nazwanym stanem.
transition('* => active', [
animate('300ms', style({ transform: 'scale(1.1)' }))
])Wiele kroków
Należy przekazać tablicę kroków, aby wykonać sekwencję w ramach jednego przejścia.
transition('closed => open', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])Przejścia wieloznaczne
Należy użyć *, aby dopasować przejścia z dowolnego stanu lub do dowolnego stanu. Jest to przydatne w przypadku ogólnych efektów pojawiania się.
transition('* => open', animate('200ms'))Style początkowe
Samodzielne style() umieszczone przed animate() ustawia punkt początkowy, a następnie Angular animuje element do stylów stanu docelowego.
transition(':enter', [
style({ opacity: 0 }),
animate('400ms', style({ opacity: 1 }))
])Dobre praktyki dotyczące czasu
Przejścia w interfejsie powinny być krótkie (150–300 ms), aby zapewnić responsywność. Dłuższe czasy trwania należy rezerwować dla dużych, zamierzonych zmian. Funkcję easing należy dopasować do pożądanego charakteru animacji.
Szybki test
Sprawdź swoją wiedzę na temat przejść i synchronizacji czasu.
Podsumowanie
Dowiedziałeś się, że transition łączy zmiany stanów, używając => lub <=>, z krokami animate. Ciąg określający czas ma format duration delay easing, a kroki style i animate można łączyć w sekwencje.
Często zadawane pytania
Czy lekcja „Przejścia i synchronizacja czasowa” jest bezpłatna?
Tak — pełny tekst „Przejścia i synchronizacja czasowa” 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 „Przejścia i synchronizacja czasowa”?
Animować przejścia między stanami Ć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 2 z 4.
Ile czasu zajmuje lekcja „Przejścia i synchronizacja czasowa”?
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