Overgangsparametre: node duration delay
Acceptér en node og et parameterobjekt i overgangsfunktionen for større fleksibilitet
Overgangsparametre: node duration delay er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Sveltejs Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Funktionssignatur
Tilpassede overgange modtager (node, params) for at være fleksible.
Læs noden
Brug noden til at beregne egenskaber som dens aktuelle størrelse eller position.
const rect = node.getBoundingClientRect();Overfør parametre
Forbrugeren overfører parametre med direktivet.
<p transition:spin={{ duration: 800 }}>...Standardværdier
Håndtér manglende parametre med standardværdier i funktionen.
function spin(node, { duration = 600 } = {}) { ... }Reaktive parametre
Parameterændringer genkører ikke en overgang midt i forløbet; den næste montering bruger den nye værdi.
Beregnet varighed
Du kan beregne varigheden ud fra data, for eksempel ordlængden til skrivemaskineeffekter.
Easing-parameter
Modtag en easing-parameter, så forbrugerne kan tilpasse kurven.
Forsinkelsesparameter
Forskyd indtrædelser ved at overføre en forsinkelse, der er beregnet ud fra et indeks.
{#each items as item, i}
<p transition:fly={{ delay: i * 50 }}>{item}</p>
{/each}Tip til CSS-strenge
Returnér sammensætbare transformationer, og undgå layoutforstyrrende egenskaber som top/left.
Ydeevne
Hold dig til transform og opacity for silkebløde animationer.
Test
Undersøg beregnede typografier under en overgang med browserens DevTools.
Hurtigt tjek
Hvad leverer params-objektet?
Opsummering
Modtag og brug params til fleksible overgange. Angiv standardværdier for manglende værdier.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Overgangsparametre: node duration delay” gratis?
Ja — hele teksten til “Overgangsparametre: node duration delay” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Sveltejs Academy-kurset, skal du opgradere til CoddyKit PRO. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Overgangsparametre: node duration delay”?
Acceptér en node og et parameterobjekt i overgangsfunktionen for større fleksibilitet Du øver dig i Sveltejs Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Sveltejs Academy?
Der kræves ingen tidligere erfaring. Sveltejs Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Overgangsparametre: node duration delay”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Sveltejs Academy-lektion?
Ja. Alle Sveltejs Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Skriv en brugerdefineret overgangsfunktion
- Overgangsparametre: node duration delay
- Opret en morphing-overgang
- CSS- eller JavaScript-overgange