Écrire une fonction de transition personnalisée
Renvoyez des fonctions CSS ou tick depuis une transition personnalisée pour animer l’entrée et la sortie du DOM.
Écrire une fonction de transition personnalisée 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.
Transitions personnalisées
Au-delà des fonctionnalités intégrées, vous pouvez écrire des fonctions de transition entièrement personnalisées.
Signature de fonction
Une fonction de transition reçoit (node, params) et retourne un objet d’options.
function spin(node) {
return {
duration: 600,
css: (t) => `transform: rotate(${t * 360}deg); opacity: ${t};`
};
}Utiliser votre transition
Appliquez-la avec transition:spin à n’importe quel élément.
Fonction CSS
Retournez une fonction css(t, u). t va de 0 à 1 ; u va de 1 à 0.
Fonction JS par image
Pour les valeurs que CSS ne peut pas animer, retournez plutôt une fonction tick.
tick: (t) => node.textContent = Math.floor(t * 100) + "%";Quand utiliser CSS plutôt que la mise à jour par image
CSS est plus rapide (accéléré par GPU). Utilisez la mise à jour par image uniquement lorsque CSS ne peut pas exprimer la modification.
Assouplissement
Appliquez l’assouplissement dans votre fonction ou acceptez-le comme paramètre.
Délai et durée
Retournez delay et duration dans l’objet d’options.
Bibliothèque réutilisable
Créez un module de transitions pour votre système de conception.
Prise en compte de la direction
Le framework appelle votre fonction à l’entrée ; la direction opposée est utilisée à la sortie.
Combiner avec les transitions d’entrée et de sortie
Vous pouvez utiliser une fonction personnalisée pour l’entrée et une autre pour la sortie avec in: et out:.
Vérification rapide
Que reçoit la fonction de style CSS d’une transition ?
Récapitulatif
Définissez des transitions personnalisées en retournant { duration, css } ou { duration, tick } depuis une fonction.
Questions Fréquemment Posées
La leçon « Écrire une fonction de transition personnalisée » est-elle gratuite ?
Oui — le texte complet de « Écrire une fonction de transition personnalisée » 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 « Écrire une fonction de transition personnalisée » ?
Renvoyez des fonctions CSS ou tick depuis une transition personnalisée pour animer l’entrée et la sortie du DOM. 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 « Écrire une fonction de transition personnalisée » ?
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