transition:fade ja transition:fly
Käyttäkää sisäänrakennettuja fade- ja fly-siirtymiä {#if}-ohjattuihin elementteihin.
transition:fade ja transition:fly 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.
Sisäänrakennetut siirtymät
Svelte sisältää useita siirtymiä moduulissa svelte/transition: fade, fly, slide, scale, blur ja draw.
Siirtymän tuonti
Tuokaa käyttöön tarvitsemanne siirtymät.
import { fade, fly } from "svelte/transition";Liittäminen transition:-direktiivillä
Ottakaa siirtymä käyttöön transition:-direktiivillä elementissä, jota ohjataan {#if}-rakenteella.
{#if visible}
<p transition:fade>Hello</p>
{/if}Fly-siirtymä
Fly-siirtymä siirtää elementin koordinaattien määrittämästä siirtymästä paikalleen.
{#if visible}
<div transition:fly={{ x: -200, duration: 400 }}>Slide in</div>
{/if}Parametriolio
Välittäkää asetuksia, kuten x, y, duration, delay ja easing.
Milloin laukaisimet aktivoituvat
Siirtymät suoritetaan elementin luonnin ja poistamisen yhteydessä {#if}-, {#each}- tai {#await}-lohkon sisällä.
Siirtymien yhdistäminen
Käyttäkää yhtä siirtymää direktiiviä kohden. Käyttäkää in:- ja out:-direktiivejä epäsymmetrisiin siirtymiin.
Sujuva käyttökokemus
Siirtymät tekevät käyttöliittymästä viimeistellyn ilman, että avainruutuja tarvitsee kirjoittaa käsin.
Suorituskyky
Sisäänrakennetut siirtymät käyttävät mahdollisuuksien mukaan CSS:ää GPU-kiihdytystä varten.
Liikkeen vähentäminen
Ottakaa prefers-reduced-motion huomioon ottamalla siirtymät käyttöön ehdollisesti.
Easing
Välittäkää svelte/easing-moduulista easing-funktio hienostuneempaa liikettä varten.
import { cubicOut } from "svelte/easing";
<p transition:fade={{ easing: cubicOut }}>...</p>Pikatarkistus
Milloin siirtymät suoritetaan?
Kertaus
Tuokaa siirtymät moduulista svelte/transition, liittäkää ne transition:-direktiivillä ja välittäkää parametriolioita niiden hallintaa varten.
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 ”transition:fade ja transition:fly” ilmainen?
Kyllä – oppitunnin ”transition:fade ja transition:fly” 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 ”transition:fade ja transition:fly”?
Käyttäkää sisäänrakennettuja fade- ja fly-siirtymiä {#if}-ohjattuihin elementteihin. 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 ”transition:fade ja transition:fly”-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