Skapa en transformerande övergång
Bygg en övergång som omformar ett element från en form eller position till en annan.
Skapa en transformerande övergång är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Morfning
En morfande övergång omvandlar ett element från en form eller position till en annan på ett mjukt sätt.
Läs av starttillståndet
Mät elementets ursprungliga layout med getBoundingClientRect.
Beräkna skillnaden
Jämför start- och målpositionerna för att härleda transformvärden.
Använd transformering
Returnera en css-funktion som interpolerar från det ursprungliga till det slutliga tillståndet.
css: (t) => `transform: scale(${1 - (1 - t)}); opacity: ${t};`FLIP-liknande mönster
Detta liknar FLIP-tekniken som används av animate:flip.
Övergångar för delade element
För delade element mellan routes kan bibliotek som svelte-shared-transitions vara till hjälp.
Begränsningsruta
Beräkna skalning och förflyttning för att morfa mellan positioner.
Webbläsar-API
View Transitions API möjliggör inbyggda övergångar för delade element; Svelte fungerar bra tillsammans med det.
Prestanda
Håll dig till transform och opacity och undvik att animera egenskaper som definierar geometrin.
Kombinera med easing
Använd easing-funktioner för en naturlig känsla; cubic-bezier passar bra för morfning.
Praktisk användning
En modal öppnas från den klickade knappen, ett listelement expanderas till en detaljvy och routes övergår till varandra.
Snabb kontroll
Vilka egenskaper passar bäst för morfning?
Sammanfattning
Morfande övergångar mäter start- och slutpositioner och interpolerar dem med CSS-strängar baserade på transform.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Skapa en transformerande övergång” gratis?
Ja – hela texten till ”Skapa en transformerande övergång” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Skapa en transformerande övergång”?
Bygg en övergång som omformar ett element från en form eller position till en annan. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Skapa en transformerande övergång”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?
Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Skriv en anpassad övergångsfunktion
- Övergångsparametrar: node duration delay
- Skapa en transformerande övergång
- CSS- eller JavaScript-övergångar