Mukautetun siirtymäfunktion kirjoittaminen
Palauttakaa mukautetusta siirtymästä CSS- tai tick-funktioita DOM-elementtien sisään- ja poistumisen animointiin.
Mukautetun siirtymäfunktion kirjoittaminen on ilmainen Sveltejs Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.
Mukautetut siirtymät
Valmiiden siirtymien lisäksi voitte kirjoittaa täysin mukautettuja siirtymäfunktioita.
Funktion allekirjoitus
Siirtymäfunktio vastaanottaa (node, params)-parametrit ja palauttaa asetusobjektin.
function spin(node) {
return {
duration: 600,
css: (t) => `transform: rotate(${t * 360}deg); opacity: ${t};`
};
}Käytä omaa siirtymääsi
Käyttäkää siirtymää minkä tahansa elementin kanssa direktiivillä transition:spin.
CSS-funktio
Palauttakaa css(t, u)-funktio. t kulkee välillä 0–1 ja u välillä 1–0.
JS-funktio (tick)
Jos arvoa ei voi animoida CSS:llä, palauttakaa sen sijaan tick-funktio.
tick: (t) => node.textContent = Math.floor(t * 100) + "%";Milloin CSS:ää käytetään tickin sijaan
CSS on nopeampi, koska se hyödyntää GPU-kiihdytystä. Käyttäkää tick-funktiota vain, kun muutosta ei voi ilmaista CSS:llä.
Easing
Käyttäkää easing-toimintoa funktion sisällä tai vastaanottakaa se parametrina.
Viive ja kesto
Palauttakaa delay ja duration asetusobjektissa.
Uudelleenkäytettävä kirjasto
Rakentakaa siirtymämoduuli suunnittelujärjestelmäänne varten.
Suunnan huomioiminen
Kehys kutsuu funktiotanne sisääntulossa; poistuttaessa käytetään vastakkaista suuntaa.
Yhdistä in/out-siirtymiin
Voitte käyttää yhtä mukautettua funktiota sisääntuloon ja toista poistumiseen in:- ja out:-direktiiveillä.
Pikatarkistus
Mitä arvoja siirtymän css-funktio vastaanottaa?
Kertaus
Määritelkää mukautetut siirtymät palauttamalla funktiosta { duration, css } tai { duration, tick }.
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 ”Mukautetun siirtymäfunktion kirjoittaminen” ilmainen?
Kyllä – oppitunnin ”Mukautetun siirtymäfunktion kirjoittaminen” 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 ”Mukautetun siirtymäfunktion kirjoittaminen”?
Palauttakaa mukautetusta siirtymästä CSS- tai tick-funktioita DOM-elementtien sisään- ja poistumisen animointiin. 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 1/4.
Kuinka kauan ”Mukautetun siirtymäfunktion kirjoittaminen”-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
- Mukautetun siirtymäfunktion kirjoittaminen
- Siirtymäparametrit: node, duration, delay
- Muotoa muuttavan siirtymän luominen
- CSS- ja JavaScript-siirtymät