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

[Vue 3] 迁移指南 – Transition Group 根元素

# Transition Group 根元素


非兼容

# 概览

<transition-group> 不再默认渲染根元素,但仍然可以用 tag prop 创建根元素。

# 2.x 语法

在 Vue 2 中,<transition-group> 像其它自定义组件一样,需要一个根元素。默认的根元素是一个 <span>,但可以通过 tag prop 定制。

<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 prop,那么一切都会和之前一样
  • 如果没有定义 tag prop,而且样式或其它行为依赖于 <span> 根元素的存在才能正常工作,那么只需将 tag="span" 添加到 <transition-group>
<transition-group tag="span">
<!-- -->
</transition-group>

# 参考

  • 过渡的 class 名更改

炫意HTML5 » [Vue 3] 迁移指南 – Transition Group 根元素

CSS3教程HTML5教程