關於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();
     }
                    
})

好啦 先分享這麼多，但願對你們有幫助！