最近有个需求，一个列表上下移动要有简单过渡效果，在网上找了找没找到，可能是我搜的关键词不对？
试了试 Vue 的
transition-group ，也没有达到预期的效果，然后就花了点时间做了一个操作Demo。最终效果
某列的数据由 X 位置上升到 Y 位置的过渡效果
技术点 visibility: hidden v-for key 这么简单的实现哪有什么技术点，哈哈哈 实现方式
这个过渡效果一共由三部分组成：
在
Y行 位置插入
X行 位置的数据，添加一个高度展开效果，并使该行的数据不可见
X行 数据不可见, 并添加一个高度收起效果 原地克隆
X行 的DOM, 设置为固定定位
fixed ，
top 取X行距离
body 的位置(
offsetTop )， 并做一个向上移动效果到
Y行 位置来看一个放慢版的效果，加了个边框并且没有设置
visibility 属性，看的会更明了：
简单说一下。
第一部分描述一个让目标位置底下所有行有一个向下移动的过程。
第二部分描述那个移动的行消失的过程。
第三部分描述一个移动的过程。
为了不污染数据渲染出来的视图，除了固定定位的那个盒子是直接操作DOM，之外的两个效果是通过操作数据+类名实现的。
遇到的问题 图片闪烁问题
原因：由于 v-for 的时候给每行的
key 是
index ，数据源发生变化后会导致受影响的元素的
index 也发生改变。解决：将
key 的值由
index 更换为
item (唯一值， 在这里
item 指的是图片url) 。频繁更新数据问题
当位置频繁改变的时候要清除上一次的动画遗留元素，不然元素会发生各种错乱，这个很容易想的到，错误演示就不录了，看一下完成的效果。
