7.15.3 transition-group
优质
小牛编辑
134浏览
2023-12-01
- Props:
tag
- string,默认为span
move-class
- 覆盖移动过渡期间应用的 CSS 类。- 除了
mode
,其他特性和<transition>
相同。
- 事件:
- 事件和
<transition>
相同。
- 事件和
- 用法:
<transition-group>
元素作为多个元素/组件的过渡效果。<transition-group>
渲染一个真实的 DOM 元素。默认渲染 <span>
,可以通过 tag
属性配置哪个元素应该被渲染。
注意,每个 <transition-group>
的子节点必须有 独立的 key ,动画才能正常工作
<transition-group>
支持通过 CSS transform 过渡移动。当一个子节点被更新,从屏幕上的位置发生变化,它将会获取应用 CSS 移动类 (通过 name
属性或配置 move-class
属性自动生成)。如果 CSS transform
属性是“可过渡”属性,当应用移动类时,将会使用 FLIP 技术 使元素流畅地到达动画终点。
<transition-group tag="ul" name="slide"> <li v-for="item in items" :key="item.id"> {{ item.text }} </li> </transition-group>