Łączenie przejść i animacji
Łącz przejścia i animacje, aby uzyskać rozbudowane, skoordynowane efekty interfejsu.
Łączenie przejść i animacji to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 4 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 Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Warstwowy ruch
Połącz transition: i animate:, aby elementy jednocześnie pojawiały się płynnie i zmieniały położenie.
Przykład
Lista zadań, na której nowe elementy pojawiają się z animacją, a istniejące płynnie zmieniają kolejność.
{#each todos as todo (todo.id)}
<li in:fly={{ y: 20 }} animate:flip>{todo.text}</li>
{/each}Kolejność stosowania
Svelte sprawnie obsługuje jednoczesne przejścia i animacje FLIP.
Unikanie konfliktów
Przejścia wpływają na przezroczystość i położenie elementu, a animacje go przesuwają. Oba mechanizmy działają niezależnie.
Dopasowanie czasu trwania
Używaj podobnych czasów trwania przejść i animacji, aby ruch wydawał się skoordynowany.
Używanie własnego easing
Zastosuj tę samą funkcję easing do obu mechanizmów, aby zachować spójne wrażenia.
Monitorowanie wydajności
Wiele jednoczesnych animacji na dużych listach może być kosztowne. Ogranicz liczbę widocznych elementów lub zastosuj wirtualizację.
Łączenie ze store'ami
Store'y spring lub tweened mogą sterować właściwościami liczbowymi, które zmieniają się razem z przejściami.
Zastosowania praktyczne
Pulpity, tablice z funkcją przeciągania i upuszczania, galerie z sortowaniem — wszędzie tam, gdzie listy zmieniają się w czasie.
Dostępność
Jednolicie respektuj prefers-reduced-motion zarówno w przejściach, jak i animacjach.
Efekt dopracowania
Skoordynowany ruch znacznie podnosi postrzeganą jakość. Warto poświęcić na niego czas.
Szybkie sprawdzenie
Czy można używać transition: i animate: razem?
Podsumowanie
Użyj transition: do animacji pojawiania się i znikania oraz animate: do zmiany kolejności, aby uzyskać bogaty i dopracowany interfejs.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „Łączenie przejść i animacji” jest bezpłatna?
Tak — pełny tekst „Łączenie przejść i animacji” 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 Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Łączenie przejść i animacji”?
Łącz przejścia i animacje, aby uzyskać rozbudowane, skoordynowane efekty interfejsu. Ćwiczysz Sveltejs 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ąć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs 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 4 z 4.
Ile czasu zajmuje lekcja „Łączenie przejść i animacji”?
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 Sveltejs Academy?
Tak. Każda lekcja Sveltejs 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
- animate:flip do zmiany kolejności listy
- Store’y spring() i tweened()
- Niestandardowe funkcje easing
- Łączenie przejść i animacji