Paramètres de transition : node duration delay
Acceptez un nœud et un objet de paramètres dans votre fonction de transition pour plus de flexibilité.
Paramètres de transition : node duration delay est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.
Signature de fonction
Les transitions personnalisées acceptent (node, params) pour plus de souplesse.
Lire le nœud
Utilisez le nœud pour calculer des propriétés comme sa taille ou sa position actuelles.
const rect = node.getBoundingClientRect();Transmettre des paramètres
Le composant appelant transmet les paramètres avec la directive.
<p transition:spin={{ duration: 800 }}>...Valeurs par défaut
Gérez les paramètres manquants avec des valeurs par défaut dans la fonction.
function spin(node, { duration = 600 } = {}) { ... }Paramètres réactifs
Les changements de paramètres ne relancent pas une transition en cours ; le prochain montage utilise la nouvelle valeur.
Durée calculée
Vous pouvez calculer la durée à partir des données, par exemple la longueur d’un mot pour des effets de machine à écrire.
Paramètre d’assouplissement
Acceptez un paramètre d’assouplissement afin que les utilisateurs puissent personnaliser la courbe.
Paramètre de délai
Décalez les entrées en transmettant un délai dérivé d’un indice.
{#each items as item, i}
<p transition:fly={{ delay: i * 50 }}>{item}</p>
{/each}Conseils pour les chaînes CSS
Retournez des transformations composables ; évitez les propriétés qui perturbent la mise en page, comme celles de positionnement.
Performances
Limitez-vous aux transformations et à l’opacité pour obtenir des animations parfaitement fluides.
Tests
Examinez les styles calculés pendant une transition avec les DevTools du navigateur.
Vérification rapide
Que fournit l’objet de paramètres ?
Récapitulatif
Acceptez et utilisez les params pour créer des transitions souples. Fournissez des valeurs par défaut pour les valeurs manquantes.
Questions Fréquemment Posées
La leçon « Paramètres de transition : node duration delay » est-elle gratuite ?
Oui — le texte complet de « Paramètres de transition : node duration delay » 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 « Paramètres de transition : node duration delay » ?
Acceptez un nœud et un objet de paramètres dans votre fonction de transition pour plus de flexibilité. 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 2 sur 4.
Combien de temps prend la leçon « Paramètres de transition : node duration delay » ?
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
- Écrire une fonction de transition personnalisée
- Paramètres de transition : node duration delay
- Créer une transition de morphing
- Transitions CSS ou JS