animate:flip pour réordonner les listes
Animez en douceur les éléments d’une liste lorsque leur ordre change grâce à la technique FLIP.
animate:flip pour réordonner les listes est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Ce que fait l’animation FLIP
flip anime fluidement les éléments lorsque leur position change dans un bloc de répétition avec clés.
Importer
Depuis svelte/animate.
import { flip } from "svelte/animate";Appliquer aux éléments
Associez-la aux éléments situés dans une répétition avec clés.
{#each items as item (item.id)}
<li animate:flip>{item.name}</li>
{/each}Technique FLIP
FLIP désigne les étapes suivantes : première position, dernière position, inversion et lecture. Svelte calcule l’écart et anime le changement en douceur à l’aide de transformations.
Bloc de répétition avec clés requis
L’animation dépend des clés pour déterminer quels nœuds du DOM correspondent à quels éléments.
Paramètres
Transmettez des options telles que { duration, delay, easing }, comme pour les transitions.
<li animate:flip={{ duration: 300 }}>Déclencheurs courants
Réorganisation par glisser-déposer, tri, filtrage ou mélange.
Associer aux transitions
Associez-le à transition: pour ajouter des animations d'entrée et de sortie aux animations de réorganisation.
Performances
Utilise des transformations CSS ; reste fluide même avec des centaines d'éléments.
Limitations
Impossible d'animer les déplacements entre conteneurs distincts dans différents blocs each.
Mouvement réduit
Ignorez l'animation lorsque l'utilisateur préfère réduire les mouvements pour des raisons d'accessibilité.
Vérification rapide
De quoi animate:flip a-t-il besoin ?
Récapitulatif
animate:flip anime fluidement la réorganisation des listes dans les blocs each indexés à l'aide de la technique FLIP.
Questions Fréquemment Posées
La leçon « animate:flip pour réordonner les listes » est-elle gratuite ?
Oui — le texte complet de « animate:flip pour réordonner les listes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « animate:flip pour réordonner les listes » ?
Animez en douceur les éléments d’une liste lorsque leur ordre change grâce à la technique FLIP. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « animate:flip pour réordonner les listes » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- animate:flip pour réordonner les listes
- Les stores spring() et tweened()
- Fonctions d’accélération personnalisées
- Combiner transitions et animations