关于animation和better-scroll遇到的问题

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

由于4M的限制 因此图片有点模糊，你们凑合着看哈，首先说到这个刷新按钮

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

@-webkit-keyframes rotate
{

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

}

animation:rotate 0.8s linear infinite;

这样就能够实现 按钮的旋转了

但接下来会有问题：一、旋转的过程当中其余的元素变得模糊 二、还有还会引发父级的高度变化

解决方案：

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

亲测有效！

二、局部滚动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();
     }
                    
})

好啦 先分享这么多，但愿对你们有帮助！