关于animation和betterscroll遇到的问题

最近做了一个项目，不是蛮复杂，但是有些知识点可以分享下，先上图

因为 4M 的限制 所以图片有点模糊，大家凑合着看哈，首先说到这个刷新按钮

1、刷新按钮 添加旋转动画很简单

@-webkit-keyframes rotate
{

from {transform: rotate(0deg);}
to {transform: rotate(360deg);}

}

animation:rotate 0.8s linear infinite;

这样就可以实现 按钮的旋转了

但接下来会有问题：1、旋转的过程中其他的元素变得模糊 2、还有还会引起父级的高度变化

解决方案：

transform:translate3d(0, 0, 0);
z-index: 1;

亲测有效！

2、局部滚动 better-scroll

用法 API 参考：http://ustbhuangyi.github.io/…

说说遇到的问题：

（1）我的项目里面，点击筛选按钮，会有一个侧边栏的列表展示，所以我进页面就请求列表，生成筛选的列表，并创建了 scroll 对象，问题就是 当我显示和隐藏侧边栏的列表的时候，scroll 因为 scrollerHeight 丢失，而会出现卡顿前几秒不滚动的现象。

针对这个问题：我想到的是，请求数据不在一进页面而是 点击按钮以后 请求接口 创建 scroll 对象并且在 this.$nextTick 里面创建

this.$nextTick(()=>{
    this.sideBarScroll = new BScroll("#sideBar_scroller",{
        scrollY: true,
        bounce:false,
        click: true
    });
});

（2）上述那么做了以后会发现一个问题，每次显示侧边栏就创建一个 scroll 对象 肯定是不行的，肉眼可以看到的问题时就 会有多个滚动条累计在一起 也就是生成了多个 scroll 对象

解决方案：

this.$nextTick(()=>{if(!this.sideBarScroll){
         this.sideBarScroll = new BScroll("#sideBar_scroller",{
             scrollY: true,
             scrollbar:{
                 fade:false,
                 interactive:false
             },
             bounce:false,
             click: true
        });
     }
     else{this.sideBarScroll.refresh();
     }
                    
})

好啦 先分享这么多，希望对大家有帮助！