# 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

# 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 tag definido 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 adicionar tag="span" ao <transition-group>:
<transition-group tag="span">
  <!-- -->
</transition-group>
1
2
3

# Estratégia de Migração

Sinalizador na compilação de migração: TRANSITION_GROUP_ROOT

# Veja também