Parametry przejść: duration delay easing
Dostosowuj przejścia, przekazując parametry duration, delay i easing.
Parametry przejść: duration delay easing to bezpłatna lekcja Sveltejs 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 Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Obiekt parametrów
Wszystkie przejścia przyjmują obiekt opcji jako drugi argument.
<p transition:fade={{ duration: 600, delay: 200 }}>duration
Całkowita długość animacji w milisekundach. Wartość domyślna to 400 ms.
delay
Czas oczekiwania przed rozpoczęciem animacji. Przydatny przy sekwencyjnym interfejsie.
easing
Funkcja mapująca liniowy postęp (0..1) na niestandardową krzywą. Domyślnie jest to krzywa liniowa.
Wbudowane funkcje easing
Importuj z svelte/easing: linear, quadIn, cubicOut, elasticOut i inne.
import { elasticOut } from "svelte/easing";Opcje poszczególnych przejść
Każde przejście ma własne parametry. Fly dodaje x i y, a scale dodaje start.
Dobieranie czasu trwania
Krótkie czasy trwania (100–200 ms) sprawdzają się w mikrointerakcjach, a dłuższe (400–700 ms) w przejściach między stronami.
Parametry reaktywne
Wartości parametrów mogą zależeć od stanu reaktywnego.
<p transition:fly={{ x: dir * 200 }}>...Działanie domyślne
Jeśli pominiesz obiekt parametrów, zostaną zastosowane rozsądne wartości domyślne.
Dopasowanie do projektu
Dostosuj czas trwania i easing, aż ruch będzie wyglądał właściwie; przetestuj go na prawdziwym urządzeniu.
Dostępność
Uwzględniaj prefers-reduced-motion, skracając czas trwania lub pomijając przejścia.
Szybkie sprawdzenie
Skąd pochodzą funkcje easing?
Podsumowanie
Dostosuj duration, delay i easing (z svelte/easing), aby uzyskać odpowiedni efekt.
Często zadawane pytania
Czy lekcja „Parametry przejść: duration delay easing” jest bezpłatna?
Tak — pełny tekst „Parametry przejść: duration delay easing” 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 „Parametry przejść: duration delay easing”?
Dostosowuj przejścia, przekazując parametry duration, delay i easing. Ć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 2 z 4.
Ile czasu zajmuje lekcja „Parametry przejść: duration delay easing”?
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
- transition:fade i transition:fly
- Parametry przejść: duration delay easing
- in: i out: dla asymetrycznych przejść
- transition:draw dla ścieżek SVG