关于animation和better-scroll碰到的题目

2019年9月1日 235次阅读 来源: dragonจุ๊บ

近来做了一个项目，不是蛮庞杂，然则有些知识点能够分享下，先上图

《关于animation和better-scroll碰到的题目》

由于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();
     }
                    
})

好啦 先分享这么多，愿望对人人有协助！

    原文作者：dragonจุ๊บ
    原文地址: https://segmentfault.com/a/1190000019373195
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞