列表的排序过渡

当插入或移除元素的时候，虽然有过渡动画，但是周围的元素会瞬间移动到新的位置，而不是平滑地过渡。为了实现平滑过渡，可以借助v-move特性。v-move对于设置过渡的切换时机和过渡曲线非常有用。v- move特性会在元素改变定位的过程中应用，它同之前的类名一样，可以通过name属性来自定义前缀(例如name="list",则对应的类名就是list-move),当然也可以通过move-class属性手动设置自定义类名。

下面我们通过代码演示v-move的使用。修改例4-13中的CSS部分，借助v-move和定位来实现元素平滑过渡到新位置的效果，具体代码如下:

保存上述代码，在浏览器中查看运行效果，可以看到在插入或移除元素时实现了平滑的过渡。

Vue使用了FLIP简单动画队列来实现排序过渡，所以即使没有插人或者移除元素，对于元素顺序的变化也支持过渡动画。FLIP 动画能提高动画的流畅度，可以解决动画的卡顿、闪烁等不流畅的现象，它不仅可以实现单列过渡，也可以实现多维网格的过渡。FLIP 代表First、Last、 Invert、 Play, 有兴趣的读者可以自行研究学习。