TransitionGroup 过渡组

是一个内置组件，设计用于呈现一个列表中的元素或组件的插入、移除和顺序改变的动画效果。

支持和基本相同的prop、CSS 过渡类和JavaScript 钩子监听器，但有以下几点区别：

• 默认情况下，它不会渲染一个包装器元素。但你可以通过传入tag prop 来指定一个元素作为包装器元素来渲染。
• 过渡模式（mode="out-in"）在这里不可用，因为我们不再是在互斥的元素之间进行切换。
• 其中的元素总是必须有一个独一无二的key attribute。
• CSS 过渡类会被应用在其中的每一个元素上，而不是这个组的容器上。

进入/ 离开过渡

这里是对一个v-for列表应用进入/ 离开过渡的示例：

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

移动过渡

上面的示例有一些明显的缺陷：当某一项被插入或移除时，它周围的元素会立即发生“跳跃”而不是平稳地移动。我们可以通过添加一些额外的 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;
}

交错的列表过渡

如果通过data attribute 用 JavaScript 来执行过渡时，那么我们也可以实现列表中的交错过渡。首先，我们把某一项的索引作为 DOM 元素上的一个data attribute 呈现出来。

接着，在 JavaScript 钩子中，我们基于这个data attribute 对该元素执行一个延迟动画：

function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15,
    onComplete: done
  })
}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com