Vue2-Transition转场动画的使用4（使用transition-group实现列表转场）

在之前的文章中，我们使用组件实现转场，主要用于单个节点，或者渲染多个节点在这两种情况之一中的同一时间节点。对于整个列表的过渡（比如使用v-for），需要使用本文介绍的组件。4、Listtransition1、说明(1)与不同的是，会作为一个真实的元素呈现：默认是一个（我们可以通过替换为其他元素标记功能。)(2)过渡模式不可用，因为我们不再在彼此之间切换唯一元素。(3)的内部元素总是需要提供一个唯一的key属性值。2、列表的进出转场（1）渲染图点击“插入元素”按钮，会在下方随机位置插入一个新的数字块，新块在插入过程中会有转场动画过程。点击“移除一个元素”按钮会随机删除下方的一个数字方块，该方块在移除过程中会有转场动画。（2）样例代码3、列表排序过渡（1）上面的例子有一个问题：新插入的元素或者移除的元素虽然有动画效果，但是周围的元素会瞬间移动到它们新的布局位置，而Not平滑过渡要解决这个问题，您需要使用新的v-move功能。v-move功能将在更改元素定位的过程中应用。和前面的类名一样：可以通过name属性自定义前缀（比如name="xxxx"，那么对应的类名就是xxx-move）或者通过move-手动设置自定义类名类属性。(2)这里对之前示例的css部分稍作修改，可以发现在插入或移除过程中，其他元素也会从原来的位置平滑过渡到新的位置。(3)Vue使用一个简单的动画队列FLIP来实现排序转换。所以即使没有插入或删除元素，元素顺序的变化也支持过渡动画。(4)FLIP动画不仅可以实现单列过渡，还可以实现多维网格过渡：附：利用js钩子函数实现列表的交错过渡。我们也可以通过data属性与JavaScript通信，实现列表的交错过渡1、效果图（一）在上方输入框输入内容时，会实时过滤下方列表，包含该文字的条目将被显示。(2)同时在列表项显示或移除的过程中会有相应的过渡动画。2，示例代码