最近做的一个小需求涉及到排序，界面如下所示：

因为项目是使用vue的，所以实现方式很简单，视图部分不用管，本质上就是操作数组，代码如下：

{// 上移moveUp (i) {// 把位置i的元素移到i-1上let tmp = this.form.replayList.splice(i, 1)this.form.replayList.splice(i - 1, 0, tmp[0])},// 下移moveDown (i) {// 把位置i的元素移到i+1上let tmp = this.form.replayList.splice(i, 1)this.form.replayList.splice(i + 1, 0, tmp[0])}}复制代码这样就可以正常的交换位置了，但是是突变的，没有动画，所以不明显，于是一个码农的自我修养(实际上是太闲)让我打开了vue的网站，看到了这个示例：cn.vuejs.org/v2/guide/tr…

这个示例我已看过多遍，但是一直没用过，这里刚好就是我要的效果，于是一通复制粘贴大法：

.flip-list-move {transition: transform 0.5s;}

复制代码这样就有交换的过渡效果了，如下：

嗯，舒服了很多，这个需求到这里就完了，但是事情并没有结束，我突然想到了以前看一些算法文章的时候通常会配上一些演示的动画，感觉跟这个很类似，那么是不是可以用这个来实现呢，当然是可以的。

实现算法演示动画（缘起）

关键词：