Grupo de Transição ​

<TransitionGroup> é um componente embutido desenhado para animação da inserção, remoção, e mudança da ordem dos elementos ou componentes que são interpretados em uma lista.

Diferenças em relação ao <Transition> ​

<TransitionGroup> suporta as mesmas propriedades, classes de transição de CSS, e ouvintes de gatilhos de JavaScript tal como o <Transition>, com as seguintes diferenças:

• Por padrão, ele não interpreta um elemento envolvedor. Mas podes especificar um elemento a ser interpretado com a propriedade tag.

• Os modos de transição não estão disponíveis, porque não estamos mais alternando entre mutuamente elementos exclusivos.

• Os elementos de dentro são sempre obrigados a ter um atributo key único.

• As classes de transição de CSS serão aplicadas aos elementos individuais na lista, não ao grupo ou ao próprio contentor.

Transições de Entrada e Saída ​

Cá está um exemplo de aplicação de transições de entrada e saída à uma 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);
}

Transições de Movimento ​

A demonstração acima tem defeitos óbvios: quando um item é inserido ou removido, seus itens circundantes "saltam" instantaneamente para lugar ao invés de moverem-se suavemente. Nós podemos corrigir isto adicionando algumas regras de CSS a mais:

.list-move, /* aplica transição aos elementos em movimento */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

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

/* garanta que os itens saindo sejam tirados do fluxo do esquema para
   as animações de movimento possam ser calculadas corretamente. */
.list-leave-active {
  position: absolute;
}

Agora está muito melhor - ainda animando suavemente quando a lista inteira é baralhada:

Exemplo Completo

Transições de Lista Surpreendente ​

Ao comunicar com as transições de JavaScript através dos atributos de dados, é também possível alterar o horário de transições em uma lista. Primeiro, interpretamos o índice de um item como um atributo de dados no elemento de 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>

Depois, nos gatilhos de JavaScript, animamos o elemento com um atraso baseado no atributo de dados. Este exemplo está usando a biblioteca GreenSock para realizar a animação:

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

Relacionado ao

• Referência de API de <TransitionGroup>