如何实现Vue列表交错过渡效果？

本文共计1215个文字，预计阅读时间需要5分钟。

交错过渡效果+花里胡哨，华而不实。基于Vue的，需要你对Vue的transition和transition-group有深入了解。Transition组件Vue文档对transition组件已有很详细的解析。

交错过渡效果

花里胡哨，华而不...真香

基于vue的，需要你对 vue 的 transition 和 transition-group有过使用和了解。

transition

vue的文档对 transtion 组件已经有了很详细的 分析 了。

这里说一下我的理解：

transtion 是vue提供的一个抽象组件，会在 合适的时机 帮我们操作其包裹的子元素。

这个合适的时机是：

1. beforeEnter dom 从 js 生成，并刚插入页面的 那一帧(对应下图的动画开始)
2. enter dom 插入页面之后的 下一帧(对应下图的动画中)
3. afterEnter dom 动画完成之后的 下一帧(对应下图的动画结束)

transition-group

ransition-group组件 会对包裹的列表中每一个元素批量进行 transtion组件 的操作。