Siirtymien parametrit: duration, delay ja easing
Mukauttakaa siirtymiä välittämällä duration-, delay- ja easing-parametrit.
Siirtymien parametrit: duration, delay ja easing on ilmainen Sveltejs Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Sveltejs Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.
Parametrio</m5024500>
Kaikki siirtymät hyväksyvät asetuksia sisältävän olion toisena argumenttina.
<p transition:fade={{ duration: 600, delay: 200 }}>duration
Animaation kokonaiskesto millisekunteina. Oletusarvo on 400 ms.
delay
Odotusaika ennen animaation aloittamista. Hyödyllinen peräkkäin etenevissä käyttöliittymissä.
easing
Funktio, joka muuntaa lineaarisen etenemisen (0..1) mukautetuksi käyräksi. Oletusarvo on linear.
Sisäänrakennetut easing-funktiot
Tuokaa ne moduulista svelte/easing: linear, quadIn, cubicOut, elasticOut ja niin edelleen.
import { elasticOut } from "svelte/easing";Siirtymäkohtaiset asetukset
Jokaisella siirtymällä on omat parametrinsa. Fly lisää x- ja y-parametrit, scale lisää start-parametrin.
Kestojen valitseminen
Käyttäkää lyhyitä kestoja (100–200 ms) mikrovuorovaikutuksiin ja pidempiä kestoja (400–700 ms) sivusiirtymiin.
Reaktiiviset parametrit
Parametrien arvot voivat riippua reaktiivisesta tilasta.
<p transition:fly={{ x: dir * 200 }}>...Oletustoiminta
Jos jätätte parametriolion pois, käytössä ovat järkevät oletusarvot.
Sovittaminen designiin
Säätäkää kestoa ja easing-funktiota, kunnes liike tuntuu sopivalta. Testatkaa sitä oikealla laitteella.
Saavutettavuus
Ottakaa prefers-reduced-motion huomioon lyhentämällä kestoa tai ohittamalla siirtymät.
Pikatarkistus
Mistä easing-funktiot tulevat?
Kertaus
Säätäkää oikean tuntuman saamiseksi duration-, delay- ja easing-arvoja, joista easing tulee moduulista svelte/easing.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Siirtymien parametrit: duration, delay ja easing” ilmainen?
Kyllä – oppitunnin ”Siirtymien parametrit: duration, delay ja easing” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Sveltejs Academy-kurssin, päivitä CoddyKit PROhon. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Siirtymien parametrit: duration, delay ja easing”?
Mukauttakaa siirtymiä välittämällä duration-, delay- ja easing-parametrit. Harjoittelet Sveltejs Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Sveltejs Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Sveltejs Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Siirtymien parametrit: duration, delay ja easing”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Sveltejs Academy-oppitunnilla?
Kyllä. Jokainen Sveltejs Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- transition:fade ja transition:fly
- Siirtymien parametrit: duration, delay ja easing
- in: ja out: epäsymmetrisiin siirtymiin
- transition:draw SVG-poluille