# Корневой элемент `<transition-group>` больше не создаётся
кардинальное изменение

# Обзор

Теперь <transition-group> по умолчанию больше не создаёт корневой элемент при отрисовке, но может его создавать при указании атрибута tag.

# Синтаксис в 2.x

Во Vue 2, <transition-group> как и другие пользовательские компоненты, нуждался в корневом элементе, который по умолчанию был <span>, но настраивался через атрибут tag.

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

1
2
3
4
5

# Синтаксис в 3.x

Во Vue 3 теперь появилась поддержка фрагментов, поэтому корневой тег больше не нужен компонентам. Поэтому по умолчанию <transition-group> и не отрисовывает его.

Если уже указан атрибут tag в коде Vue 2, как в примере выше, то всё будет работать как и раньше
Если атрибут не указывался и стилизация или другое поведение полагается на наличие корневого элемента <span>, то добавьте tag="span" в <transition-group>:

<transition-group tag="span">
  <!-- -->
</transition-group>

1
2
3

# Стратегия миграции

Флаг сборки для миграции: TRANSITION_GROUP_ROOT

# См. также

← Использование transition корневым элементом Удалён модификатор v-on.native →