Vue列表滚动动画，如何实现长尾词的流畅过渡？

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

原文示例：本文字例为大家分享了Vue实现列表滚动过渡动画的整体代码，供大家参考。具体内容如下：+ 效果图 + 失败比较+ 严重，在手机上效果更佳。+ 原理解析+ 这个滚动页面由两个部分布局（底部固定）。

本文实例为大家分享了Vue实现列表滚动过渡动画的具体代码，供大家参考，具体内容如下

效果图

失帧比较严重，在手机上效果更佳。

原理分析

这个滚动页面由两个部分布局（底部固定的Tab页面除外）。一个是顶部的banner轮播，一个是下面的列表。这里的重点是做列表的动画，banner轮播的网上资料很多，请自行查找。

这个动画最重要的是在滚动中实时计算startIndex和endIndex，动画比较简单，就是scale和opacity的变化。向下滚动时，startIndex变小；向上滚动时，endIndex变大时，新露脸的项做该动画。当滚动连起来，就是一个完整的动画了。

涉及的技术

使用better-scroll做滚动以及轮播图

使用create-keyframe-animation做动画控制

实现步骤

1、vue的template部分

注意：由于IOS渲染速度比较快, 必须把没有展现在首屏的页面上的item隐藏掉，即index比startIndex小、比endIndex大的item都应该隐藏，避免页面动画混乱。