列表的排序过渡

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

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

/+ 数字圆圈部分样式*/
.list-item {
display: inline-block; margin-right: 10px; background-color: red;
border-radius: 50%; width: 25px; height: 25px; text-align: center;
line- -height: 25px; color: #fff;
}
/* 插人元素过程*/
.list-enter-active {
  transition: all ls;
}
/*移除元素过程*/
.list-leave-active {
   transition: all ls;
   position: absolute;
}
 /*开始插入/移除结束的位置变化*/
 .list -enter, .list-leave-to
   opacity: 0;
   transform: translateY (30px);
}
/*元素定位改变时的动画*/
.list-move {
   transition: transform ls;
}

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

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