最近有个需求，一个列表上下移动要有简单过渡效果，在网上找了找没找到，可能是我搜的关键词不对？
试了试 Vue 的 transition-group ，也没有达到预期的效果，然后就花了点时间做了一个操作Demo。
最终效果
某列的数据由 X 位置上升到 Y 位置的过渡效果
技术点 visibility: hidden v-for key 这么简单的实现哪有什么技术点，哈哈哈 实现方式
这个过渡效果一共由三部分组成：
在 Y行 位置插入 X行 位置的数据，添加一个高度展开效果，并使该行的数据不可见 X行 数据不可见, 并添加一个高度收起效果 原地克隆 X行 的DOM, 设置为固定定位 fixe
在Vue中实现列表的上下过渡效果，通常我们会利用Vue的内置组件`transition-group`来处理元素的进入和离开动画。然而，在某些特定情况下，可能需要自定义过渡效果以满足更复杂的需求。本篇文章将深入探讨如何通过手动操作DOM和Vue的数据绑定来创建一个列表上下移动的过渡效果。
这个过渡效果主要涉及以下技术点：
1. `visibility: hidden`: 控制元素的可见性，用于在过渡过程中隐藏或显示元素。
2. `v-for`与`key`: 使用`v-for`循环遍历列表数据，并通过`key`属性为每个元素提供唯一的标识。
3. 动态添加和移除CSS类：通过Vue的数据绑定，动态改变元素的CSS类，以实现过渡效果。
过渡效果的实现分为三个阶段：
1. **插入数据并扩展高度**：在Y行的位置插入X行的数据，同时设置一个高度展开动画。在这个阶段，新插入的行将从无到有逐渐显示，同时Y行及其下方的行会向下移动，以适应新增的高度。
2. **X行数据收起**：X行的数据变为不可见，并添加一个高度收起效果。这通常是通过设置`visibility: hidden`或者调整高度来实现，使得X行逐渐消失。
3. **DOM克隆与定位**：原地克隆X行的DOM，设置为固定定位`fixed`，并根据X行距离body的`offsetTop`设定`top`值，然后模拟一个向上移动的效果，最终到达Y行的位置。这种方法避免了直接操作原始数据导致的闪烁问题。
在实现过程中，可能会遇到以下问题：
- **图片闪烁问题**：由于使用`index`作为`key`，当数据源变化时，受影响行的`index`也会改变，导致元素重新渲染。解决办法是使用列表项的唯一值（如`item`）作为`key`。
- **频繁更新数据**：如果列表位置频繁变动，需要清除上一次动画的遗留元素，以防止元素错乱。可以监听数据变化，当位置变化时，清除上一个动画的元素。
- **重复的`key`值**：在插入数据时，如果两条相同数据的`key`重复，会引发Vue的警告。解决方案是在插入时更改原有行的`key`，例如使用当前时间戳`Date.now()`，确保其唯一。
总结来说，本文介绍了如何通过Vue和自定义CSS动画实现列表上下过渡效果。这个过程中，关键在于巧妙地结合Vue的数据绑定和DOM操作，以及对`transition`和`transition-group`组件的理解。同时，注意处理可能出现的DOM更新和动画同步问题，以确保过渡效果的平滑和稳定。这样的实践有助于提升开发者对Vue动画机制的掌握，为创建更复杂的交互效果打下基础。
