vue如何实现列表滚动的过渡动画-创新互联

创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商，新人活动买多久送多久，划算不套路！

这篇文章主要介绍vue如何实现列表滚动的过渡动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

效果图

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

原理分析

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

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

涉及的技术

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

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

实现步骤

1、vue的template部分

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

  

    

    
{{item.num}}
    

      
{{item.name}}
      
{{item.desc}}