Vue列表上下过渡效果如何实现成长尾词？

本文共计932个文字，预计阅读时间需要4分钟。

最近有个需求，列表上下移动需要简单过渡效果，在网上找了找，找不到合适的。试了试Vue的transition-group，也没有达到预期的效果。然后花了一些时间做了个过渡效果。

最近有个需求，一个列表上下移动要有简单过渡效果，在网上找了找没找到，可能是我搜的关键词不对？

试了试 Vue 的 transition-group ，也没有达到预期的效果，然后就花了点时间做了一个操作Demo。

最终效果

某列的数据由 X 位置上升到 Y 位置的过渡效果

技术点 visibility: hidden v-for key 这么简单的实现哪有什么技术点，哈哈哈 实现方式

这个过渡效果一共由三部分组成：

在 Y行 位置插入 X行 位置的数据，添加一个高度展开效果，并使该行的数据不可见 X行 数据不可见, 并添加一个高度收起效果 原地克隆 X行 的DOM, 设置为固定定位 fixed ， top 取X行距离 body 的位置( offsetTop )， 并做一个向上移动效果到 Y行 位置

来看一个放慢版的效果，加了个边框并且没有设置 visibility 属性，看的会更明了：

简单说一下。

第一部分描述一个让目标位置底下所有行有一个向下移动的过程。