VueJS - Transition et animation

Dans ce chapitre, nous discuterons des fonctionnalités de transition et d'animation disponibles dans VueJS.

Transition

VueJS fournit différentes manières d'appliquer la transition aux éléments HTML lorsqu'ils sont ajoutés / mis à jour dans le DOM. VueJS a un composant de transition intégré qui doit être enveloppé autour de l'élément, qui a besoin d'une transition.

Syntaxe

<transition name = "nameoftransition">
   <div></div>
</transition>

Prenons un exemple pour comprendre le fonctionnement de la transition.

Exemple

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .fade-enter-active, .fade-leave-active {
            transition: opacity 2s
         }
         .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "fade">
            <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true,
               styleobj :{
                  fontSize:'30px',
                  color:'red'
               }
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

Il existe un bouton appelé clickme créé à l'aide duquel nous pouvons changer la valeur de la variable show en true en false et vice versa. Il y a unp tagqui montre l'élément de texte uniquement si la variable est vraie. Nous avons enveloppé la balise p avec l'élément de transition, comme indiqué dans le morceau de code suivant.

<transition name = "fade">
   <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
</transition>

Le nom de la transition est fade. VueJS fournit des classes standard pour la transition et les classes sont préfixées avec le nom de la transition.

Voici quelques classes standard pour la transition -

  • v-enter- Cette classe est appelée initialement avant que l'élément ne soit mis à jour / ajouté. C'est l'état de départ.

  • v-enter-active- Cette classe est utilisée pour définir le délai, la durée et la courbe d'accélération pour entrer dans la phase de transition. Il s'agit de l'état actif pour l'ensemble et la classe est disponible pendant toute la phase d'entrée.

  • v-leave - Ajouté lorsque la transition de sortie est déclenchée, supprimée.

  • v-leave-active- Appliqué pendant la phase de départ. Il est supprimé lorsque la transition est effectuée. Cette classe est utilisée pour appliquer le délai, la durée et la courbe d'accélération pendant la phase de sortie.

Chacune des classes ci-dessus sera précédée du nom de la transition. Nous avons donné le nom de la transition comme fondu, d'où le nom des classes devient.fade_enter, .fade_enter_active, .fade_leave, .fade_leave_active.

Ils sont définis dans le code suivant.

<style>
   .fade-enter-active, .fade-leave-active {
      transition: opacity 2s
   }
   .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0
   }
</style>

Les .fade_enter_active et .fade_leave_active sont définis ensemble et il applique une transition au début et à la sortie. La propriété d'opacité passe à 0 en 2 secondes.

La durée est définie dans les fichiers .fade_enter_active et .fade_leave_active. La dernière étape est définie dans le .fade_enter, .fade_leave_to.

L'affichage dans le navigateur est le suivant.

En cliquant sur le bouton, le texte disparaîtra en deux secondes.

Après deux secondes, le texte disparaîtra complètement.

Prenons un autre exemple, où il y a une image et elle est décalée sur l'axe des x lorsque le bouton est cliqué.

Exemple

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .shiftx-enter-active, .shiftx-leave-active {
            transition: all 2s ease-in-out;
         }
         .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
            transform :  translateX(100px);
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/img.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

Le nom de la transition est shiftx. Une propriété de transformation est utilisée pour décaler l'image sur l'axe des x de 100 pixels à l'aide du morceau de code suivant.

<style>
   .shiftx-enter-active, .shiftx-leave-active {
      transition: all 2s ease-in-out;
   }
   .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
      transform :  translateX(100px);
   }
</style>

Voici la sortie.

En cliquant sur le bouton, l'image se déplacera de 100 pixels vers la droite, comme illustré dans la capture d'écran suivante.

Animation

Les animations sont appliquées de la même manière que la transition. L'animation a également des classes qui doivent être déclarées pour que l'effet se produise.

Prenons un exemple pour voir comment fonctionne l'animation.

Exemple

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .shiftx-enter-active {
            animation: shift-in 2s;
         }
         .shiftx-leave-active {
            animation: shift-in 2s reverse;
         }
         @keyframes shift-in {
            0%   {transform:rotateX(0deg);}
            25%  {transform:rotateX(90deg);}
            50%  {transform:rotateX(120deg);}
            75%  {transform:rotateX(180deg);}
            100% {transform:rotateX(360deg);}
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">Click Me</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/img.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

Pour appliquer une animation, il existe des classes identiques à celles de transition. Dans le code ci-dessus, nous avons une image incluse dans la balise p, comme indiqué dans le morceau de code suivant.

<transition name = "shiftx">
   <p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height:100px;" /></p>
</transition>

Le nom de la transition est shiftx. La classe appliquée est la suivante -

<style>
   .shiftx-enter-active {
      animation: shift-in 2s;
   }
   .shiftx-leave-active {
      animation: shift-in 2s reverse;
   }
   @keyframes shift-in {
      0%   {transform:rotateX(0deg);}
      25%  {transform:rotateX(90deg);}
      50%  {transform:rotateX(120deg);}
      75%  {transform:rotateX(180deg);}
      100% {transform:rotateX(360deg);}
   }
</style>

La classe est précédée du nom de la transition, c'est-à-dire shiftx-enter-active et .shiftx-Leave-active. L'animation est définie avec les images clés de 0% à 100%. Il y a une transformation définie à chacune des images clés, comme indiqué dans le morceau de code suivant.

@keyframes shift-in {
   0%   {transform:rotateX(0deg);}
   25%  {transform:rotateX(90deg);}
   50%  {transform:rotateX(120deg);}
   75%  {transform:rotateX(180deg);}
   100% {transform:rotateX(360deg);}
}

Voici la sortie.

En cliquant sur le bouton, il pivote de 0 à 360 degrés et disparaît.

Classes de transition personnalisées

VueJS fournit une liste de classes personnalisées, qui peuvent être ajoutées en tant qu'attributs à l'élément de transition.

  • enter-class
  • enter-active-class
  • leave-class
  • leave-active-class

Les classes personnalisées entrent essentiellement en jeu lorsque nous voulons utiliser une bibliothèque CSS externe telle que animate.css.

Exemple

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <button @click = "show = !show"><span style = "font-size:25px;">Animate</span></button>
         <transition
            name = "custom-classes-transition"
            enter-active-class = "animated swing"
            leave-active-class = "animated bounceIn">
            <p v-if = "show"><span style = "font-size:25px;">Example</span></p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

Production

Production

Production

Il y a deux animations appliquées dans le code ci-dessus. Un enter-active-class = "swing animé" et un autre Leave-active-class = "animated bounceIn". Nous utilisons des classes d'animation personnalisées pour que l'animation soit appliquée à partir de la bibliothèque tierce.

Durée de transition explicite

Nous pouvons appliquer une transition et une animation sur l'élément en utilisant VueJS. Vue attend les événements transionend et animationend pour détecter si l'animation ou la transition est terminée.

Parfois, la transition peut entraîner un retard. Dans de tels cas, nous pouvons appliquer la durée explicitement comme suit.

<transition :duration = "1000"></transition>
<transition :duration = "{ enter: 500, leave: 800 }">...</transition>

Nous pouvons utiliser la propriété duration avec un: sur l'élément de transition comme indiqué ci-dessus. Dans le cas où il est nécessaire de spécifier la durée séparément pour entrer et sortir, cela peut être fait comme indiqué dans le morceau de code ci-dessus.

Crochets JavaScript

Les classes de transition peuvent être appelées en tant que méthodes utilisant des événements JavaScript. Prenons un exemple pour une meilleure compréhension.

Exemple

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
      <div id = "example-4">
         <button @click = "show = !show">
            <span style = "font-size:25px;">Toggle</span>
         </button>
         <transition  v-on:before-enter = "beforeEnter"
            v-on:enter = "enter"
            v-on:leave = "leave"
            v-bind:css = "false">
            <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#example-4',
            data: {
               show: false
            },
            methods: {
               beforeEnter: function (el) {
                  el.style.opacity = 0
               },
               enter: function (el, done) {
                  Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
                  Velocity(el, { fontSize: '10px' }, { complete: done })
               },
               leave: function (el, done) {
                  Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
                  Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                  Velocity(el, {
                     rotateZ: '45deg',
                     translateY: '30px',
                     translateX: '30px',
                     opacity: 0
                  }, { complete: done })
               }
            }
         });
      </script>
   </body>
</html>

Production

Dans l'exemple ci-dessus, nous effectuons une animation à l'aide des méthodes js sur l'élément de transition.

Les méthodes de transition sont appliquées comme suit -

<transition  v-on:before-enter = "beforeEnter"
   v-on:enter = "enter"
   v-on:leave = "leave"
   v-bind:css = "false">
   <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>

Il y a un préfixe ajouté v-onet le nom de l'événement auquel la méthode est appelée. Les méthodes sont définies dans l'instance Vue comme suit -

methods: {
   beforeEnter: function (el) {
      el.style.opacity = 0
   },
   enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
      Velocity(el, { fontSize: '10px' }, { complete: done })
   },
   leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
         rotateZ: '45deg',
         translateY: '30px',
         translateX: '30px',
         opacity: 0
      }, { complete: done })
   }
}

La transition requise est appliquée dans chacune de ces méthodes. Il y a une animation d'opacité appliquée sur le clic du bouton et également lorsque l'animation est terminée. Une bibliothèque tierce est utilisée pour l'animation.

Il y a une propriété ajoutée sur la transition v-bind: css = "false", ce qui est fait pour que Vue comprenne qu'il s'agit d'une transition JavaScript.

Transition au rendu initial

Afin d'ajouter une animation au début, nous devons ajouter la propriété «apparaissent» à l'élément de transition.

Regardons un exemple pour mieux le comprendre.

Exemple

<html>
   <head>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated bounceIn">
            <h1>BounceIn - Animation Example</h1>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated swing">
            <h1>Swing - Animation Example</h1>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated rubberBand">
            <h1>RubberBand - Animation Example</h1>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

Dans l'exemple ci-dessus, nous avons utilisé trois animations différentes de la bibliothèque animate.css. Nous avons ajouté apparaître à l'élément de transition.

Lors de l'exécution du code ci-dessus, ce qui suit sera la sortie dans le navigateur.

Animation sur les composants

Nous pouvons encapsuler la transition pour les composants en utilisant le code suivant. Nous avons utilisé ici un composant dynamique.

Exemple

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
   </head>
   <body>
      <div id = "databinding" style = "text-align:center;">
         <transition  appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated wobble">
            <component v-bind:is = "view"></component>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-
                  size:25;color:red;">Animation on Components</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

Production

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved