animate:flip til omarrangering af lister
Animér listeelementer jævnt, når deres rækkefølge ændres, med FLIP-teknikken
animate:flip til omarrangering af lister er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 1 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.
Hvad animate:flip gør
flip animerer elementer jævnt, når deres position ændres i en nøglebaseret each-blok.
Importér
Fra svelte/animate.
import { flip } from "svelte/animate";Anvend på elementer
Tilknyt den til elementer inde i en nøglebaseret each-blok.
{#each items as item (item.id)}
<li animate:flip>{item.name}</li>
{/each}FLIP-teknikken
FLIP står for First, Last, Invert, Play. Svelte beregner forskydningen og animerer jævnt ved hjælp af transforms.
Nøglebaseret each er påkrævet
Animationen afhænger af nøgler for at vide, hvilke DOM-noder der hører til hvilke elementer.
Parametre
Videregiv indstillingerne { duration, delay, easing } ligesom ved overgange.
<li animate:flip={{ duration: 300 }}>Almindelige udløsere
Omarrangering via træk og slip, sortering, filtrering eller blanding.
Kombinér med overgange
Kombinér med transition: for animationer ved ind- og udgang oven på omarrangeringsanimationer.
Ydeevne
Bruger CSS-transformationer og er flydende selv for hundredvis af elementer.
Begrænsninger
Kan ikke animere flytninger på tværs af containere mellem forskellige each-blokke.
Reduceret bevægelse
Spring animationen over, når brugeren foretrækker reduceret bevægelse af hensyn til tilgængelighed.
Hurtigt tjek
Hvad kræver animate:flip?
Opsummering
animate:flip animerer jævnt omarrangering af lister inde i nøglebaserede each-blokke ved hjælp af FLIP-teknikken.
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 “animate:flip til omarrangering af lister” gratis?
Ja — hele teksten til “animate:flip til omarrangering af lister” 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 “animate:flip til omarrangering af lister”?
Animér listeelementer jævnt, når deres rækkefølge ændres, med FLIP-teknikken 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 1 af 4.
Hvor lang tid tager lektionen “animate:flip til omarrangering af lister”?
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
- animate:flip til omarrangering af lister
- spring()- og tweened()-stores
- Brugerdefinerede easing-funktioner
- Kombinér overgange og animationer