Vue.js Transitions & animations

Dans ce chapitre, nous abordons principalement les effets de transition et les effets d'animation de Vue.js.

---

Transitions

Vue offre diverses façons d'appliquer des effets de transition lors de l'insertion, de la mise à jour ou de la suppression d'éléments DOM.

Vue fournit un composant d'encapsulation de transition intégré, qui sert à envelopper les composants qui ont besoin d'effets de transition.

Format de syntaxe

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

Nous pouvons comprendre comment les transitions de Vue sont implémentées à travers l'exemple suivant :

Dans l'exemple, cliquer sur le bouton « Cliquez-moi » fait passer la variable show de true à false. Si elle vaut true, cela affiche le contenu de la balise p enfant.

Le code suivant montre que la balise transition enveloppe la balise p :

<transition name = "fade">
    <p v-show = "show" v-bind:style = "styleobj">动画实例</p>
</transition>

Une transition est essentiellement un effet de fondu à l'entrée et à la sortie. Vue fournit 6 classes qui sont basculées lorsque les éléments sont affichés et masqués :

• v-enter: Définit l'état initial de la transition d'entrée. Elle est appliquée avant que l'élément ne soit inséré, et supprimée une frame après l'insertion de l'élément.

• v-enter-active: Définit l'état lorsque la transition d'entrée est active. Elle est appliquée pendant toute la phase de transition d'entrée, prend effet avant que l'élément ne soit inséré, et est supprimée une fois la transition/animation terminée. Cette classe peut être utilisée pour définir la durée, le délai et la fonction d'accélération de la transition d'entrée.

• v-enter-to: Version 2.1.8 et supérieureDéfinit l'état final de la transition d'entrée. Elle prend effet une frame après l'insertion de l'élément (en même tempsv-enterest supprimée), et est supprimée une fois la transition/animation terminée.

• v-leave: Définit l'état initial de la transition de sortie. Elle prend effet immédiatement lorsque la transition de sortie est déclenchée, et est supprimée une frame plus tard.

• v-leave-active: Définit l'état lorsque la transition de sortie est active. Elle est appliquée pendant toute la phase de transition de sortie, prend effet immédiatement lorsque la transition de sortie est déclenchée, et est supprimée une fois la transition/animation terminée. Cette classe peut être utilisée pour définir la durée, le délai et la fonction d'accélération de la transition de sortie.

• v-leave-to: Version 2.1.8 et versions ultérieuresDéfinit l'état final de la transition de sortie. Elle prend effet une frame après le déclenchement de la transition de sortie (en même tempsv-leaveest supprimée), et est supprimée une fois la transition/animation terminée.

Pour ces noms de classes qui changent pendant les transitions, si vous utilisez une transition sans nom<transition>, puisv-est le préfixe par défaut pour ces noms de classes. Si vous utilisez<transition name="my-transition">, puisv-entersera remplacé parmy-transition-enter。

v-enter-activeetv-leave-activepeut contrôler les différentes courbes d'accélération des transitions d'entrée/sortie ; un exemple sera donné dans la section suivante.

Transitions CSS

Généralement, nous utilisons les transitions CSS pour obtenir des effets.

Comme dans l'exemple suivant :

Animations CSS

Les animations CSS sont utilisées de manière similaire aux transitions CSS, mais dans les animations, le nom de classe v-enter n'est pas supprimé immédiatement après l'insertion du nœud dans le DOM ; il est supprimé lorsque l'événement animationend est déclenché.

Noms de classes de transition personnalisés

Nous pouvons personnaliser les noms de classes de transition à l'aide des attributs suivants :

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

Les noms de classes de transition personnalisés ont une priorité plus élevée que les noms de classes ordinaires, de sorte qu'ils peuvent être bien combinés avec des bibliothèques d'animation tierces (comme animate.css).

Utiliser les transitions et les animations ensemble

Pour que Vue sache qu'une transition est terminée, il doit mettre en place l'écouteur d'événement correspondant. Il peut êtretransitionendouanimationend, selon les règles CSS appliquées à l'élément. Si vous utilisez l'un ou l'autre, Vue peut automatiquement identifier le type et mettre en place l'écouteur.

Cependant, dans certains scénarios, vous devez définir deux effets de transition sur le même élément en même temps, tels queanimationest déclenché et se termine très rapidement, tandis quetransitionl'effet n'est pas encore terminé. Dans ce cas, vous devez utilisertypel'attribut et définiranimationoutransitionpour déclarer explicitement le type que Vue doit écouter.

Durées de transition explicites

Dans de nombreux cas, Vue peut déterminer automatiquement quand l’effet de transition se termine. Par défaut, Vue attend le premiertransitionendouanimationendévénement. Cependant, il est également possible de le définir autrement—par exemple, nous pouvons avoir une série d’effets de transition savamment chorégraphiée, dans laquelle certains éléments imbriqués internes ont des transitions retardées ou plus longues que l’élément racine de l’effet de transition.

Dans ce cas, vous pouvez utiliser<transition>sur le composantdurationattribut pour personnaliser une durée de transition explicite (en millisecondes) :

<transition :duration="1000">...</transition>

Vous pouvez également personnaliser la durée d’entrée et de sortie :

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

---

Hooks JavaScript

Vous pouvez déclarer des hooks JavaScript dans les attributs :

Ces fonctions de hook peuvent être utilisées en combinaison avec des transitions/animations CSS, ou elles peuvent être utilisées seules.

Lorsque vous utilisez uniquement des transitions JavaScript,Dansenteretleavedevez utiliser dansdonepour le callback. Sinon, elles seront appelées de manière synchrone, et la transition se terminera immédiatement.

Il est recommandé d'ajouterv-bind:css="false", Vue ignorera la détection CSS. Cela évite également l'influence du CSS pendant le processus de transition.

Un exemple simple utilisant Velocity.js :

---

Transitions au rendu initial

Vous pouvez utiliserappearattribut pour définir la transition du nœud lors du rendu initial.

<transition appear>
  <!-- ... -->
</transition>

La valeur par défaut ici est la même que pour les transitions enter/leave, et vous pouvez également personnaliser les noms de classes CSS.

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class" (2.1.8+)
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

Hooks JavaScript personnalisés :

<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>

Transitions pour plusieurs éléments

Nous pouvons définir des transitions pour plusieurs éléments, généralement une liste et une description :

Il convient de noter que lorsque des éléments portant le même nom de balise sont basculés, vous devez utiliserkeyl'attribut pour définir une valeur unique afin de les marquer pour que Vue puisse les distinguer ; sinon, par souci d'efficacité, Vue ne remplacera que le contenu à l'intérieur de la même balise.

<transition>
  <table v-if="items.length > 0">
    <!-- ... -->
  </table>
  <p v-else>抱歉，没有找到您查找的内容。</p>
</transition>

Comme dans l'exemple suivant :

<transition>
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>

Dans certains scénarios, vous pouvez également utiliser l'keyattribut pour définir différents états à remplacerv-ifetv-else, l'exemple ci-dessus peut être réécrit comme suit :

<transition>
  <button v-bind:key="isEditing">
    {{ isEditing ? 'Save' : 'Edit' }}
  </button>
</transition>

Utilisation de plusieursv-ifla transition de plusieurs éléments peut être réécrite comme une transition d'un seul élément liée à un attribut dynamique. Par exemple :

<transition>
  <button v-if="docState === 'saved'" key="saved">
    Edit
  </button>
  <button v-if="docState === 'edited'" key="edited">
    Save
  </button>
  <button v-if="docState === 'editing'" key="editing">
    Cancel
  </button>
</transition>

peut être réécrit comme suit :

<transition>
  <button v-bind:key="docState">
    {{ buttonMessage }}
  </button>
</transition>

// ...
computed: {
  buttonMessage: function () {
    switch (this.docState) {
      case 'saved': return 'Edit'
      case 'edited': return 'Save'
      case 'editing': return 'Cancel'
    }
  }
}

Autres extensions