TransitionGroup ​

<TransitionGroup> es un componente integrado diseñado para animar la inserción, eliminación y cambio de orden de elementos o componentes que se renderizan en una lista.

Diferencias con <Transition> ​

<TransitionGroup> soporta las mismas props, clases de transición CSS y oyentes de hook de JavaScript que <Transition>, con las siguientes diferencias:

• Por defecto, no renderiza un elemento contenedor. Pero puedes especificar un elemento a renderizar con la prop tag.

• Los modos de transición no están disponibles, porque ya no estamos alternando entre elementos mutuamente excluyentes.

• Los elementos internos siempre requieren tener un atributo key único.

• Las clases de transición CSS se aplicarán a los elementos individuales de la lista, no al grupo / contenedor en sí.

Transiciones de Entrada / Salida ​

Aquí hay un ejemplo de cómo aplicar transiciones de entrada / salida a una lista v-for usando <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);
}

Transiciones de Movimiento ​

La demostración anterior tiene algunos defectos obvios: cuando se inserta o elimina un elemento, los elementos circundantes "saltan" instantáneamente a su lugar en lugar de moverse suavemente. Podemos arreglar esto añadiendo algunas reglas CSS adicionales:

.list-move, /* aplicar transición a elementos en movimiento */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

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

/* asegúrate de que los elementos salientes sean retirados del layout para
  que las animaciones de movimiento puedan calcularse correctamente. */
.list-leave-active {
  position: absolute;
}

Ahora se ve mucho mejor, incluso animando suavemente cuando toda la lista se mezcla:

Ejemplo Completo

Clases personalizadas de TransitionGroup ​

También puedes especificar clases de transición personalizadas para el elemento en movimiento pasando la prop moveClass a <TransitionGroup>, al igual que las clases de transición personalizadas en <Transition>.

Escalonando las Transiciones de Lista ​

Al comunicarse con las transiciones de JavaScript a través de atributos de datos, también es posible escalonar las transiciones en una lista. Primero, renderizamos el índice de un elemento como un atributo de datos en el elemento 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>

Luego, en los hooks de JavaScript, animamos el elemento con un retraso basado en el atributo de datos. Este ejemplo utiliza la librería GSAP para realizar la animación:

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

Relacionado

• Referencia de <TransitionGroup> de la API