Dans cet article, vous apprendrez à utiliser la boîte à outils AnimXYZ pour créer des animations uniques, interactives et visuellement attrayantes en Vue.js et en HTML simple. À la fin de cet article, vous aurez appris comment l'ajout de quelques classes CSS aux éléments dans les composants Vue.js peut vous donner beaucoup de contrôle sur la façon dont ces éléments se déplacent dans le DOM.

Ce tutoriel sera bénéfique pour les lecteurs. qui sont intéressés par la création d'animations interactives avec quelques lignes de code.

Remarque : Cet article nécessite une compréhension de base de Vue.js et CSS.

Qu'est-ce qu'AnimXYZ ?

AnimXYZ est une boîte à outils d'animation CSS composable, performante et personnalisable alimentée par des variables CSS. Il est conçu pour vous permettre de créer des animations impressionnantes et uniques sans écrire une ligne d'images clés CSS. Sous le capot, il utilise des variables CSS pour créer des propriétés CSS personnalisées. La bonne chose à propos d'AnymXYZ est son approche déclarative. Un élément peut être animé de deux manières : en entrant ou en sortant de la page. Si vous souhaitez animer un élément HTML avec cette boîte à outils, l'ajout d'une classe de xyz-out animera l'élément hors de la page, tandis que xyz-in animera le composant dans le page.

Cette boîte à outils géniale peut être utilisée dans un projet HTML standard, ainsi que dans une application Vue.js ou React. Cependant, au moment de la rédaction de cet article, la prise en charge de React est toujours en cours de développement.

Pourquoi utiliser AnimXYZ ?

Composable

Animation avec AnimXYZ est possible en ajoutant des noms de classes descriptifs à votre balisage. Cela facilite l'écriture d'une animation CSS complexe sans écrire d'images clés CSS complexes. Animer un élément dans la page est aussi simple que d'ajouter une classe de xyz-in dans le composant et de déclarer un attribut descriptif.

Animation CSS composable avec AnimXYZ

Le code ci-dessus fera le paragraphe l'élément s'estompe dans la page, tandis que le code ci-dessous fera disparaître l'élément de la page. Une seule classe avec beaucoup de puissance.

Animation CSS composable avec AnimXYZ

Personnalisable

Pour des animations simples, vous pouvez utiliser les utilitaires prêts à l'emploimais AnimXYZ peut faire tellement plus. Vous pouvez personnaliser et contrôler AnimXYZ pour créer exactement les animations que vous souhaitez en définissant les variables CSS qui pilotent toutes les animations AnimXYZ. Nous créerons des animations personnalisées plus tard dans ce didacticiel.

Performant

Avec AnimXYZ, vous pouvez créer des animations puissantes et fluides prêtes à l'emploi, et sa taille n'est que de 2,68 Ko pour la fonctionnalité de base et de 11,4 Ko si vous inclure les utilitaires pratiques.

Facile à apprendre et à utiliser

AnimXYZ fonctionne parfaitement avec HTML et CSS standard, et il peut être intégré dans un projet en utilisant le lien de réseau de diffusion de contenu (CDN). Il peut également être utilisé dans Vue.js et React, bien que la prise en charge de React soit toujours en cours de développement. De plus, la courbe d'apprentissage avec cette boîte à outils n'est pas abrupte par rapport aux bibliothèques d'animation telles que GSAP et Framer Motionet la documentation officielle facilite le démarrage car elle explique comment le Le package fonctionne en termes simples.

Concepts clés dans AnimXYZ

Contextes

Lorsque vous souhaitez qu'un flux d'animation particulier soit appliqué à des groupes d'éléments liés, l'attribut xyz fournit le contexte. Supposons que vous souhaitiez que trois div soient animés de la même manière lorsqu'ils entrent dans la page. Tout ce que vous avez à faire est d'ajouter l'attribut xyz à l'élément parent, avec les utilitaires composables et la variable que vous souhaitez appliquer.

Le code ci-dessus appliquera la même animation à tous les div s avec une classe de forme. Tous les éléments enfants se fondront dans la page et basculeront vers le coin supérieur gauche, car l'attribut xyz="fade flip-up flip-left" a été appliqué à l'élément parent.

AnimXYZ facilite l'animation d'un élément enfant différemment de son parent. Pour ce faire, ajoutez l'attribut xyz avec une variable d'animation différente et différents utilitaires à l'élément enfant, ce qui réinitialisera toutes les propriétés d'animation héritées de son parent.

Utilitaires

AnimXYZ est livré avec de nombreux utilitaires qui vous permettront de créer des animations CSS attrayantes et puissantes sans écrire de CSS personnalisé.

xyz="fade up in-left in-rotate-left out -right out-rotate-right"

Par exemple, le code ci-dessus a un utilitaire fade upqui fera disparaître l'élément de haut en bas en entrant dans la page. Il entrera et tournera de la gauche. Lorsque l'élément quitte la page, il ira vers la droite et pivotera hors de la page.

Avec les utilitaires prêts à l'emploi, vous pouvez, par exemple, retourner un groupe d'éléments vers la droite et les faire fondu en quittant la page. Les possibilités de ce qui peut être réalisé avec les utilitaires sont infinies.

Staggering

L'utilitaire stagger contrôle la propriété CSS animation-delay pour chacun des éléments d'une liste , afin que leurs animations se déclenchent les unes après les autres. Il spécifie le temps d'attente entre l'application de l'animation à un élément et le début de l'exécution de l'animation. Essentiellement, il est utilisé pour mettre en file d'attente l'animation afin que les éléments puissent être animés en séquence.

En ajoutant l'utilitaire staggerchaque élément d'un parent div s'animera l'un après l'autre de gauche à droite. L'ordre peut être respecté en utilisant stagger-rev.

Avec stagger :

Sans stagger :

Utiliser AnimXYZ avec HTML et CSS

Créons une carte et ajoutons une animation sympa avec AnimeXYZ.

Tout d'abord, nous avons besoin pour ajouter la boîte à outils AnimXYZ à notre projet. Le moyen le plus simple est via un CDN. Saisissez le CDN et ajoutez-le à l'head de votre document HTML.

Ajoutez les lignes de code suivantes à votre code HTML.

// html

 
 Animation CSS composable avec Animxyz
  

        
        
Image de Jordon Cheung
  

C'est ici que la magie opère. En haut de la page, nous avons une balise de paragraphe avec une classe de xyz-in et un attribut xyz avec une valeur de fade. Cela signifie que l'élément p s'estompera dans la page.

Ensuite, nous avons une carte avec un id de glassavec le suivant ]xyz attribut :

  xyz="fade flip-down flip-right-50% duration-10"

Les utilitaires composables ci-dessus feront disparaître la carte dans la page. La valeur flip-down configurera la carte pour qu'elle bascule dans la page à partir du bas, et la valeur flip-right retournera la carte de 50 % en quittant la page. Une durée d'animation de 10 (c'est-à-dire 1 seconde) définit la durée nécessaire à l'animation pour terminer un cycle.

Intégration d'AnimXYZ dans Vue.js

Scaffold a Vue.js Project[19659012]À l'aide de l'interface de ligne de commande (CLI) de Vue.js, exécutez la commande ci-dessous pour générer l'application :

vue create animxyz-vue

Install VueAnimXYZ

npm install @animxyz/vue

This installera à la fois le package principal et le package Vue.js. Après l'installation, nous devrons importer le package VueAnimXYZ dans notre projet et ajouter le plugin globalement à notre application Vue.js. Pour ce faire, ouvrez votre fichier main.js et ajoutez le bloc de code suivant en conséquence :

import VueAnimXYZ from '@animxyz/vue' // import AnimXZY vue package
importer '@animxyz/core' // importer le package de base AnimXZY

Vue.use(VueAnimXYZ)

Le composant XyzTransition

Le composant XyzTransition est construit sur le composant transition de Vue.js . Il est utilisé pour animer des éléments individuels dans et hors de la page.

Voici une démonstration de l'utilisation du composant XyzTransition dans Vue.js.

Remarquez qu'une grande partie de la complexité qui vient avec le composant « transition » de Vue.js a été supprimé afin de réduire la complexité et d'augmenter l'efficacité. Tout ce dont nous devons nous soucier lors de l'utilisation du composant `XyzTransition` sont les accessoires `appear`, `appear-visible`, `duration` et `mode`.

Pour un guide plus détaillé, consultez le [official documentation](https://animxyz.com/docs/#vue-xyz-transition).

Utilisons le composant `XYZTransition` pour animer un élément lorsqu'un bouton est cliqué.

    Animate
    
      

    

Remarquez comment l'élément que nous avons l'intention de faire passer est enveloppé dans le composant `XYZTransition`. Ceci est important car l'élément enfant «  héritera des utilitaires appliqués au composant `XYZTransition`. L'élément enfant est également rendu conditionnellement lorsque `isAnimate` est défini sur `true`. Lorsque le bouton est cliqué, l'élément enfant avec une classe de "carré" est basculé dans et hors du DOM.

#### `XyzTransitionGroup`

Le composant `XyzTransitionGroup` est construit sur Vue.js' [`transition-group` component](https://vuejs.org/v2/api/#transition-group). Il est utilisé pour animer des groupes d'éléments dans et hors de la page.

Vous trouverez ci-dessous une illustration de l'utilisation du composant `XyzTransitionGroup` dans Vue.js. Notez ici encore qu'une grande partie de la complexité associée au composant "groupe de transition" de Vue.js a été supprimée afin de réduire la complexité et d'augmenter l'efficacité. Tout ce dont nous devons nous soucier lors de l'utilisation du composant `XyzTransitionGroup` sont `appear`, `appear-visible`, `duration` et `tag`. Ce qui suit est pris [from the documentation](https://animxyz.com/docs#vue-xyz-transition-group) :

### Construire un modal animé avec AnimXYZ et Vue.js

Construisons des composants modaux qui s'animeront lorsqu'ils entreront et sortiront du DOM.

Voici une démo de ce que nous allons construire :

En ajoutant la propriété `xyz="fade out-delay-5"` au composant `XyzTransition`, le modal s'estompera.

Notez que nous ajoutons `.xyz-nested` à presque tous les éléments enfants du composant modal. C'est parce que nous voulons déclencher leurs animations lorsqu'un élément d'un composant modal est ouvert.

La propriété `ease-out-back` que nous avons ajoutée au conteneur de dialogue ajoutera un léger dépassement lors de l'ouverture et de la fermeture de la boîte de dialogue.

L'ajout de "in-delay" aux éléments enfants du composant modal rendra l'animation plus naturelle, car l'élément sera retardé jusqu'à ce que les autres contenus du modal soient animés dans :

  

    

      

        

          Les animations AnimXYZ sont désactivées si votre navigateur ou système d'exploitation a
          réglage de mouvement réduit activé.
          
            En savoir plus ici.
          
        
      
    
    
Animation modale avec AnimXYZ et Vue.js
    
      Open Modal
    
    
      Fermez cette fenêtre
    
    

      
        

          

            

              Rejoignez notre communauté sur Slack
            
            
              
            
          
          

            

              
              
            
            
929 utilisateurs sont enregistrés jusqu'à présent.
          
          

            Entrez votre e-mail
            
            
              Recevoir mon invitation
            
            
Déjà rejoint ?
            
              
              Open Slack
            
          
        
      
    
  

Ensuite, dans notre modal, nous utiliserions la directive `v-if="isModal"` pour spécifier que nous voulons que le modal soit caché de la page par défaut. Ensuite, lorsque le bouton est cliqué, nous ouvrons le modal en appelant la méthode `open()`, qui définit la propriété `isModal` sur `true`. Cela révélera le modal sur la page et appliquera également les propriétés d'animation que nous avons spécifiées à l'aide des utilitaires intégrés d'AnimXYZ.

Les animations d'AnimXYZ sont désactivées lorsque le paramètre de mouvement réduit dans le navigateur ou le système d'exploitation est activé. Affichons un message d'aide aux utilisateurs qui ont opté pour le mouvement réduit.

À l'aide de l'écran "@media et de la requête média (préfère-mouvement réduit)", nous afficherons un message informant ces utilisateurs qu'ils ont désactivé la fonction d'animation dans notre composant modal. Pour ce faire, ajoutez le bloc de code suivant à vos styles :