TransitionGroup ​

<TransitionGroup> est un composant natif conçu pour animer l'insertion, la suppression et le changement d'ordre des éléments ou des composants qui sont rendus dans une liste.

Différences avec <Transition> ​

<TransitionGroup> prend en charge les mêmes props, classes de transition CSS et écouteurs de hooks JavaScript que <Transition>, avec les différences suivantes :

• Par défaut, il ne rend pas d'élément en contenant d'autres. Mais vous pouvez spécifier un élément à rendre avec la prop tag.

• Les modes de transition ne sont pas disponibles, car nous n'alternons plus entre des éléments qui s'excluent mutuellement.

• Les éléments à l'intérieur sont contraints de toujours avoir un attribut unique key.

• Les classes de transition CSS seront appliquées aux éléments individuels de la liste, pas au groupe/conteneur lui-même.

Transitions d'Entrée / Sortie ​

Voici un exemple d'application des transitions d'entrée / sortie dans une liste v-for en utilisant <TransitionGroup> :

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

Transitions de mouvements ​

La démonstration ci-dessus présente des défauts évidents : lorsqu'un élément est inséré ou retiré, les éléments qui l'entourent "sautent" instantanément au lieu de se déplacer en douceur. Nous pouvons corriger ce problème en ajoutant quelques règles CSS supplémentaires :

.list-move, /* appliquer la transition aux éléments mobiles */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* s'assure que les éléments sortants sont retirés du flux de la mise en page afin que le déplacement
   des animations soit calculé correctement. */
.list-leave-active {
  position: absolute;
}

Maintenant, c'est beaucoup mieux - elle s'anime même en douceur lorsque la liste entière est mélangée :

Exemple complet

Classes de TransitionGroup personnalisées ​

Vous pouvez également spécifier des classes de transition personnalisées pour l'élément mobile en passant la propriété moveClass à <TransitionGroup>, comme dans l'exemple suivant Classes de transition personnalisées.

Échelonner des transitions de liste ​

En communiquant avec les transitions JavaScript par le biais d'attributs de données, il est également possible d'échelonner les transitions dans une liste. Tout d'abord, nous rendons l'index d'un élément comme un attribut de données sur l'élément du DOM :

<TransitionGroup
  tag="ul"
  :css="false"
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @leave="onLeave"
>
  <li
    v-for="(item, index) in computedList"
    :key="item.msg"
    :data-index="index"
  >
    {{ item.msg }}
  </li>
</TransitionGroup>

Ensuite, dans les hooks JavaScript, nous animons l'élément avec un délai basé sur l'attribut de données. Cet exemple utilise la bibliothèque GSAP pour réaliser l'animation :

function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15,
    onComplete: done
  })
}

Référence

• Référence de l'API <TransitionGroup>