最近有个需求，一个列表上下移动要有简单过渡效果。本文通过实例代码给大家介绍Vue 列表上下过渡效果,需要的朋友可以参考下

本文实例为大家分享了Vue实现列表滚动过渡动画的具体代码，供大家参考，具体内容如下 效果图 失帧比较严重，在手机上效果更佳。 原理分析 这个滚动页面由两个部分布局（底部固定的Tab页面除外）。一个是顶部的banner轮播，一个是下面的列表。这里的重点是做列表的动画，banner轮播的网上资料很多，请自行查找。 这个动画最重要的是在滚动中实时计算startIndex和endIndex，动画比较简单，就是scale和opacity的变化。向下滚动时，startIndex变小；向上滚动时，endI

最近有个需求，一个列表上下移动要有简单过渡效果，在网上找了找没找到，可能是我搜的关键词不对？ 试了试 Vue 的 transition-group ，也没有达到预期的效果，然后就花了点时间做了一个操作Demo。 最终效果 某列的数据由 X 位置上升到 Y 位置的过渡效果 技术点 visibility: hidden v-for key 这么简单的实现哪有什么技术点，哈哈哈 实现方式 这个过渡效果一共由三部分组成： 在 Y行 位置插入 X行 位置的数据，添加一个高度展开效果，并使该行的数据不可