炫意html5
最早CSS3和HTML5移动技术网站之一

[Vue.js 3.0] Migration – Transition Group Root Element

# Transition Group Root Element


breaking

# Overview

<transition-group> no longer renders a root element by default, but can still create one with the tag prop.

# 2.x Syntax

In Vue 2, <transition-group>, like other custom components, needed a root element, which by default was a <span> but was customizable via the tag prop.

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

# 3.x Syntax

In Vue 3, we have fragment support, so components no longer need a root node. Consequently, <transition-group> no longer renders one by default.

  • If you already have the tag prop defined in your Vue 2 code, like in the example above, everything will work as before
  • If you didn’t have one defined and your styling or other behaviors relied on the presence of the <span> root element to work properly, simply add tag="span" to the <transition-group>:
<transition-group tag="span">
<!-- -->
</transition-group>

# See also

  • Some transition classes got a rename

炫意HTML5 » [Vue.js 3.0] Migration – Transition Group Root Element

CSS3教程HTML5教程