是一个内置组件,用于对
v-for
列表中的元素或组件的插入、移除和顺序改变添加动画效果。
的区别
支持和
基本相同的 props、CSS 过渡 class 和 JavaScript 钩子监听器,但有以下几点区别:
默认情况下,它不会渲染一个容器元素。但你可以通过传入
tag
prop 来指定一个元素作为容器元素来渲染。过渡模式在这里不可用,因为我们不再是在互斥的元素之间进行切换。
列表中的每个元素都必须有一个独一无二的
key
attribute。CSS 过渡 class 会被应用在列表内的元素上,而不是容器元素上。
TIP
当在 DOM 内模板中使用时,组件名需要写为
。
这里是
对一个
v-for
列表添加进入 / 离开动画的示例:
<TransitionGroup name="list" tag="ul"> <li v-for="item in items" :key="item"> {{ item }} li> TransitionGroup>
.list-enter-active, .list-leave-active { transition: all 0.5s ease; } .list-enter-from, .list-leave-to { opacity: 0; transform: translateX(30px); }在任意位置添加一项移除任意位置上的一项
- 1
- 2
- 3
- 4
- 5
上面的示例有一些明显的缺陷:当某一项被插入或移除时,它周围的元素会立即发生“跳跃”而不是平稳地移动。我们可以通过添加一些额外的 CSS 规则来解决这个问题:
.list-move, /* 对移动中的元素应用的过渡 */ .list-enter-active, .list-leave-active { transition: all 0.5s ease; } .list-enter-from, .list-leave-to { opacity: 0; transform: translateX(30px); } /* 确保将离开的元素从布局流中删除 以便能够正确地计算移动的动画。 */ .list-leave-active { position: absolute; }现在它看起来好多了,甚至对整个列表执行洗牌的动画也都非常流畅:
添加删除重新排序
- 1
- 2
- 3
- 4
- 5
通过在 JavaScript 钩子中读取元素的 data attribute,我们可以实现带渐进延迟的列表动画。首先,我们把每一个元素的索引渲染为该元素上的一个 data attribute:
<TransitionGroup tag="ul" :css="false" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" > <li v-for="(item, index) in computedList" :key="item.msg" :data-index="index" > {{ item.msg }} li> TransitionGroup>接着,在 JavaScript 钩子中,我们基于当前元素的 data attribute 对该元素的进场动画添加一个延迟。
function onEnter(el, done) { gsap.to(el, { opacity: 1, height: '1.6em', delay: el.dataset.index * 0.15, onComplete: done }) }