CSS- eller JavaScript-overgange
Vælg mellem CSS-keyframe-overgange og JavaScript-tick-funktioner
CSS- eller JavaScript-overgange er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 4 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.
To tilstande
Tilpassede overgange returnerer enten en css-funktion (GPU) eller en tick-funktion (JS-drevet for hvert frame).
Hvornår skal CSS bruges
Til transform, opacity, color – alt, hvad CSS kan animere. CSS kører på compositoren ved 60 fps.
Hvornår skal tick bruges
Til tekstændringer, canvas-pixels eller andre egenskaber, der ikke håndteres af CSS.
Omkostningen ved tick
Tick kører i JavaScript for hvert animationsframe. Det er mere krævende end CSS.
Hybridtilgang
Nogle overgange kan bruge CSS til det visuelle og tick til lejlighedsvise opdateringer, der ikke håndteres af CSS.
På tværs af browsere
CSS-animationer understøttes overalt; tick er altid tilgængelig, fordi den er JavaScript.
Tilgængelighed
Begge respekterer prefers-reduced-motion, hvis du undersøger det i din overgang.
Profilering
Brug fanen Performance til at sammenligne CSS- og tick-implementeringer.
Mønster for reserve||||Fallback-mønster
Hvis CSS ikke kan opnå effekten, skal du elegant falde tilbage til tick.
Kombinering
Flere elementer med forskellige overgange kan blande CSS og tick i den samme visning.
Bedste praksis
Brug som standard CSS. Brug kun tick, når CSS virkelig ikke kan udtrykke animationen.
Hurtigt tjek
Hvornår bør du foretrække css-funktionen i en overgang?
Opsummering
Vælg css til GPU-accelererede overgange, og reserver tick til animationer, der ikke håndteres af CSS, for eksempel tekst- eller canvasændringer.
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 “CSS- eller JavaScript-overgange” gratis?
Ja — hele teksten til “CSS- eller JavaScript-overgange” 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 “CSS- eller JavaScript-overgange”?
Vælg mellem CSS-keyframe-overgange og JavaScript-tick-funktioner 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 4 af 4.
Hvor lang tid tager lektionen “CSS- eller JavaScript-overgange”?
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