TransitionGroup ​

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

Diferencias con respecto a <Transition> ​

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

• Por defecto, no renderiza un elemento contenedor. Sin embargo, puedes especificar un elemento que se renderice con la prop tag.

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

• Se requiere que los elementos en el interior siempre tengan un atributo key único.

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

Transiciones de Entrada / Salida ​

Este es un ejemplo de aplicación de transiciones de entrada / salida a una lista v-for utilizando <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 que lo rodean "saltan" instantáneamente a su lugar en lugar de moverse suavemente. Podemos arreglar esto añadiendo algunas reglas CSS adicionales:

.list-move, /* aplicar la transición a los 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);
}

/* asegurar que los elementos de salida son extraídos del flujo del diseño
para que puedan calcularse correctamente las animaciones en movimiento. */
.list-leave-active {
  position: absolute;
}

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

Ejemplo Completo

Escalonamiento de las Transiciones de una Lista ​

Al comunicarse con las transiciones de JavaScript mediante atributos de datos, también es posible escalonar las transiciones en una lista. En primer lugar, se representa el índice de un elemento como un atributo de datos en el elemento del 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 data. Este ejemplo utiliza la librería GreenSock 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 la API sobre <TransitionGroup>