J'utilise le même modèle d'animation dans mes projets depuis un moment maintenant pour animer des éléments à l'écran. Dans sa forme la plus simple, vous auriez un élément stylisé avec une opacité de zéro, puis modifieriez le style pour avoir une opacité de un avec une transition CSS d'une seconde. Nous pouvons nous appuyer sur cela en ajoutant d'autres propriétés de transition, en modifiant la durée, en ajoutant un délai ou en définissant un assouplissement personnalisé. est un composant React réutilisable que j'ai créé chaque fois que je souhaite ajouter rapidement des effets d'animation à mes projets. Composant utilitaire simple, il combine CSS Animation avec les classes Tailwind pour créer des animations fluides et accrocheuses avec un minimum d'effort. <AnimateIn/> Voyons comment il est utilisé. Après avoir importé le composant, définissez les états et avec les classes Tailwind. Enveloppez l’élément cible dans pour voir l’animation prendre vie. from to <AnimateIn/> import AnimateIn from '../animation/AnimateIn'; <AnimateIn from="opacity-0 scale-90" to="opacity-100 scale-100" duration={500} > <YourComponent /> </AnimateIn> Voici un exemple légèrement plus complexe qui utilise davantage de propriétés pour animer un titre et un sous-titre. import AnimateIn from '../animation/AnimateIn'; <header> <AnimateIn as="h1" from="opacity-0 translate-y-32" to="opacity-100 translate-y-0" delay={500} duration={300} className="text-4xl" style={{transitionTimingFunction:"cubic-bezier(0.25, 0.4, 0.55, 1.4)"}} > My Big Headline </AnimateIn> <AnimateIn as="h2" from="opacity-0 scale-0" to="opacity-100 scale-100" delay={800} duration={500} className="text-lg" > This is a subtitle below the headline </AnimateIn> </header> Dans l'exemple de titre, est utilisé pour créer un effet de glissement combiné à un fondu entrant. Voici comment chaque propriété contribue à l'animation : <AnimateIn/> property : en définissant , nous demandons à AnimateIn de restituer l'animation en tant qu'élément . as as="h1" <h1> propriétés et : la propriété démarre le titre hors écran ( , en le déplaçant de 32 unités vers le bas) et invisible ( ). La propriété ramène ensuite le titre à sa position finale (retour à ) et le rend entièrement visible ( ). from to from translate-y-32 opacity-0 to translate-y-0 opacity-100 Propriété : l'animation est configurée pour commencer immédiatement sans délai et s'exécute pendant 300 ms rapides. duration Propriété : Le applique la classe utilitaire de Tailwind pour définir la taille de la police, faisant ainsi ressortir le titre. className className="text-4xl" propriété : la personnalisée ( ) ajoute une facilité unique à l'animation, lui donnant un effet de rebond. style transitionTimingFunction cubic-bezier(0.25, 0.4, 0.55, 1.4) Le sous-titre utilise un ensemble différent d'animations pour compléter le titre, créant ainsi un flux visuel cohérent. property : ici, restitue le composant sous la forme d'un élément , adapté à un sous-titre. as as="h2" <h2> et les propriétés : le sous-titre commence par être réduit à zéro ( ) et invisible ( ), puis s'agrandit jusqu'à sa taille naturelle ( ) et devient entièrement visible ( ). Cet effet de mise à l'échelle, associé à un fondu entrant, ajoute de la profondeur à l'animation. from to scale-0 opacity-0 scale-100 opacity-100 Propriétés et : le sous-titre démarre également après un délai de 800 ms, de sorte qu'il commence une fois que le titre est entièrement animé. Cette approche échelonnée garantit que chaque élément obtient son moment d'attention. delay duration Propriété : définit la taille de la police du sous-titre, la rendant plus petite que le titre mais toujours significative. className className="text-lg" Pour mieux comprendre ce qui se passe, regardons le code source de : <AnimateIn/> sur Github utilise un hook pour initialiser l'état de l'animation avec la propriété , qui doit être une ou plusieurs classes utilitaires Tailwind, préparant le terrain pour le point de départ de l'animation avant qu'une animation n'ait lieu. <AnimateIn/> useState from Le premier hook du composant permet de respecter les préférences de l'utilisateur en matière de réduction des mouvements. En écoutant la requête multimédia , le comportement de l'animation est basé sur les paramètres système de l'utilisateur. Si un mouvement réduit est préféré, l'animation est entièrement ignorée, définissant directement l'état de l'animation sur la propriété , permettant une expérience accessible. useEffect (prefers-reduced-motion: reduce) to Le deuxième hook est l’endroit où réside la logique d’animation. Si l'utilisateur n'a pas indiqué de préférence pour un mouvement réduit, le composant définit une minuterie qui modifie l'état d'animation la valeur initiale la valeur finale après le délai spécifié. Cette transition crée l'effet visuel de l'animation. useEffect from to La fonction de nettoyage de ce hook (l'instruction return) efface le minuteur, empêchant ainsi les fuites de mémoire potentielles, par exemple si le composant se démonte avant la fin de l'animation. L'appel de fonction est le mécanisme de rendu du composant. Il crée dynamiquement un élément HTML basé sur l'accessoire , permettant l'utilisation du composant sur différents éléments HTML. Le est construit à l'aide de la fonction , qui combine les classes utilitaires de Tailwind, le personnalisé passé comme accessoire et l'état actuel de l'animation. Cette affectation de classe dynamique applique les styles et les transitions souhaités à l'élément. React.createElement as className cn popularisée par shadcn className De plus, il existe un attribut qui peut être transmis pour définir directement les propriétés de style sur le conteneur d'animation. La est définie en fonction de l'accessoire , mais elle passe intelligemment à si l'utilisateur préfère un mouvement réduit, désactivant ainsi l'animation tout en conservant la fonctionnalité du composant. style transitionDuration duration 0ms Si vous souhaitez utiliser dans votre propre projet et qu'il utilise déjà , alors vous avez déjà tout ce dont vous avez besoin, et ajoutez-le à vos composants. <AnimateIn/> shadcn téléchargez simplement AnimateIn.tsx Sinon, vous souhaiterez ainsi que l' pour fusionner les classes tailwind. installer Tailwind mxcn utilitaire utile Comme shadcn, <AnimateIn/> est censé être un composant réutilisable que vous pouvez copier et coller dans vos applications et personnaliser selon vos besoins. Le code est à vous. De plus, j'ai créé une belle page de démonstration pour jouer à la création de différentes animations avec sur . <AnimateIn/> animate-in.vercel.app Également publié ici

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Making security fun one episode at a time

J'ai créé un composant utilitaire React pour les animations avec Tailwind et CSS : AnimateIn

Trop long; Pour lire

John Polacek

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

J'ai créé un composant utilitaire React pour les animations avec Tailwind et CSS : AnimateIn

Trop long; Pour lire

John Polacek

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

HISTOIRES CONNEXES