Skip to content
The translation is synced to the docs on of which the commit hash is 8a7fb04.

Elemento de Raiz do Grupo de Transição
rutura

Visão Geral

<transition-group> já não desenha um elemento de raiz por padrão, mais ainda pode criar um com o atributo tag.

Sintaxe da 2.x

Na Vue 2, <transition-group>, tal como outros componentes personalizados, precisava dum elemento de raiz, que por padrão era <span> mas era personalizável através do atributo tag:

html
<transition-group tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</transition-group>

Sintaxe da 3.x

Na Vue 3, temos suporte a fragmento, então os componentes já não precisam dum nó de raiz. Consequentemente, <transition-group> já não desenha um por padrão.

  • Se já tivermos o atributo tag definido no nosso código de Vue 2, tal como no exemplo acima, tudo funcionará como antes.
  • Se não tínhamos um definido e a nossa estilização ou outros comportamentos dependem da presença do elemento de raiz <span> para funcionar apropriadamente, simplesmente adicionamos tag="span" ao <transition-group>:
html
<transition-group tag="span">
  <!-- -->
</transition-group>

Estratégia de Migração

Opção de Construção de Migração: TRANSITION_GROUP_ROOT

Consulte Também