Vue列表上下过渡效果示例代码

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

我试过Vue的过渡组，但是没有达到预期的效果。然后我花了一些时间做了一个操作演示。

最终效果

列中数据从x位置到y位置的转换效果

技术点可视性：隐藏v-for key这么简单的实现技术点是什么，哈哈哈实现方式

这种过渡效果由三部分组成：

在Y行位置插入X行的数据，添加一个高度展开的效果使X行的数据不可见，并添加一个高度折叠的效果原地克隆X行的DOM，设置为固定定位固定，顶部取X行位置远离体(offsetTop)，对Y行位置做一个向上移动的效果。

看看慢版的效果，加边框不设置可见性属性，会更清晰：

简单说一下。

第一部分描述了使目标位置下的所有行都向下移动的过程。

第二部分描述了移动线消失的过程。

第三部分描述了一个移动过程。

为了不污染数据渲染的视图，除了固定框直接操作DOM，其他两种效果都是通过操纵数据类名来实现的。

遇到的问题图片闪烁问题

原因：因为v-for中每一行给出的键都是index，所以当数据源发生变化时，受影响元素的索引也会发生变化。

解决方法：将键值从索引改为项(唯一值，这里项指图片url)。

数据的频繁更新

当位置频繁变化时，应该清除上一个动画留下的元素，否则会混淆元素。很容易想象错误的演示不会被记录。看成品效果。

检测到重复的密钥

原因：第一部分是插入X行数据造成的，因为相同数据的重复项会造成重复键。

解决方法：在做第一部分时，将原始行的键更改为另一个值。

li :key='closeIndex===index？date . now(): item/Li我用的时间戳只能写在理论上。反正这一行数据会在动画结束后从数据中删除。

摘要

以上是边肖介绍的Vue列表过渡效果的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！