in: et out: pour les transitions asymétriques
Spécifiez des transitions différentes pour l’entrée et la sortie des éléments.
in: et out: pour les transitions asymétriques est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
Pourquoi utiliser des transitions asymétriques
Vous pouvez parfois vouloir des animations différentes lors de l’entrée et de la sortie d’un élément.
Directive d’entrée
Appliquez une transition uniquement lors de l’insertion de l’élément.
<p in:fly={{ y: 50 }}>Enter</p>Directive de sortie
Appliquez une transition uniquement lors de la suppression de l’élément.
<p out:fade>Leave</p>Combiner les deux
Utilisez les deux directives sur un même élément pour personnaliser entièrement les animations d’entrée et de sortie.
<p in:fly={{ y: 50 }} out:fade={{ duration: 200 }}>...</p>Fonctions différentes
Les transitions d’entrée et de sortie peuvent être des fonctions complètement différentes, comme un déplacement et un fondu.
Paramètres différents
Transmettez une durée, un délai ou une interpolation différente pour chaque direction.
Utiliser dans les blocs conditionnels
L’élément doit être créé ou supprimé de manière réactive, comme avec les transitions normales.
Éviter de combiner transition: et in:/out:
Choisissez soit transition: pour un comportement symétrique, soit in:/out: pour un comportement asymétrique. Les mélanger provoque des conflits.
Exemple concret
Une notification éphémère peut apparaître par le haut avec un déplacement, puis disparaître sur place avec un fondu.
<div in:fly={{ y: -50 }} out:fade>{message}</div>Performances
Chaque transition sollicite le CPU. Utilisez-les avec modération dans les grandes listes.
Modèle récapitulatif
Les transitions asymétriques sont une amélioration rapide pour soigner l’interface : les entrées paraissent accueillantes et les sorties rapides.
Vérification rapide
Quelle est la différence entre l’entrée et la sortie ?
Récapitulatif
Utilisez in: pour les entrées et out: pour les sorties. Combinez-les pour obtenir des transitions asymétriques et soignées.
Questions Fréquemment Posées
La leçon « in: et out: pour les transitions asymétriques » est-elle gratuite ?
Oui — le texte complet de « in: et out: pour les transitions asymétriques » 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 « in: et out: pour les transitions asymétriques » ?
Spécifiez des transitions différentes pour l’entrée et la sortie des éléments. 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 3 sur 4.
Combien de temps prend la leçon « in: et out: pour les transitions asymétriques » ?
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
- transition:fade et transition:fly
- Paramètres de transition : duration delay easing
- in: et out: pour les transitions asymétriques
- transition:draw pour les tracés SVG