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>

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

У Vue 3 у нас є підтримка фрагментів, тому компоненти більше не потребують кореневого вузла. Отже, <transition-group> більше не рендерить його за замовчуванням.

• Якщо у вашому коді Vue 2 вже визначено атрибут tag, як наведено у прикладі вище, все працюватиме як і раніше
• Якщо у вас його не було визначено і ваш стиль чи інша поведінка залежали від наявності кореневого елемента <span> для належної роботи, просто додайте tag="span" до <transition-group>:

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

Стратегія міграції #

Прапор збірки міграції: TRANSITION_GROUP_ROOT

Дивіться також #

• Деякі імена класів переходів отримали зміни
• <Transition> як кореневий компонент більше не можна перемикати ззовні