<TransitionGroup> Transições de Lista
Última atualização: 2026-10-22
<TransitionGroup> Transições de Lista
O
| Grupo | Integrados |
|---|---|
| Tipo | Componente / Elemento |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</TransitionGroup>
.list-move { transition: transform .4s }⚙️ Argumentos
| props | tag (em qual tag renderizar, sem contêiner por padrão) / name / move-class / appear |
|---|
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
New items appear one by one while existing rows slide aside.💡 Pontos-chave
⚠️ Aviso Cada item precisa de uma key única: sem ela não é possível calcular o movimento de posição.
ℹ️ Nota O movimento usa a classe .move inserida (com o prefixo de name); precisa de transition ou animation para funcionar.
💡 Dica tag="ul" renderiza um contêiner de lista real; sem tag, nenhum elemento extra é renderizado.
🏷️ Integrados relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Qual a diferença em relação ao Transition?
R O Transition cuida da entrada/saída de um único elemento; o TransitionGroup cuida de adição, remoção e movimentação em listas.
P Sem animação de movimento?
R Verifique se a regra de transição .move existe e se as keys são únicas.
P Entrada e movimento podem animar juntos?
R Sim, entrada e movimento são calculados em paralelo; ajuste com move-class se necessário.
