# Elemento Raiz para Transição em Grupo
breaking
# Visão Geral
<transition-group> não renderiza mais um elemento raiz por padrão, mas ainda pode criar um com o atributo tag.
# Sintaxe v2.x
No Vue 2, <transition-group>, como outros componentes personalizados, precisava de um elemento raiz, que por padrão era um <span>, mas era personalizável através do atributo tag.
<transition-group tag="ul">
<li v-for="item in items" :key="item">
{{ item }}
</li>
</transition-group>
1
2
3
4
5
2
3
4
5
# Sintaxe v3.x
No Vue 3, temos suporte a fragmentos, então os componentes não precisam mais de um nó raiz. Consequentemente, <transition-group> não renderiza mais um por padrão.
- Se você já tem o atributo
tagdefinido em seu código Vue 2, como no exemplo acima, tudo funcionará como antes - Se você não tem um definido e seu estilo ou outros comportamentos dependem da presença do elemento raiz
<span>para funcionar corretamente, basta adicionartag="span"ao<transition-group>:
<transition-group tag="span">
<!-- -->
</transition-group>
1
2
3
2
3
# Estratégia de Migração
Sinalizador na compilação de migração: TRANSITION_GROUP_ROOT