微信小程序-动画加载滑进函数封装自写

//xx.wxml

nih
 

//xx.wxss
.需要动画的标签类{
  transition:all 1s;
  transform: translateY(40px);
  opacity: 0;
}

.jiazaihou后期添加的类{
  transform:translateY(0) !important;
  opacity:1 !important;

}

//xx.js
data:{
    isan5:false,
    isan6:false,
    isan7:false,
}
onPageScroll(e){
    // 滑动出现
    this.getOffsetValue('an');
    this.getOffsetValue('an');
    this.getOffsetValue('an3');
    this.getOffsetValue('an4');
    this.getOffsetValue('an5');
    this.getOffsetValue('an7');
  },

  // 获取元素的offset值
  getOffsetValue(idName){
    let _this = this;
    let widH = wx.getSystemInfoSync().windowHeight;//获取设备视图区高
    const query = wx.createSelectorQuery();
    query.select(`#${idName}`).boundingClientRect();
    query.selectViewport().scrollOffset();
    query.exec(function(res){
      let itemTop = res[0].top;
      let itemH = res[0].height;
      let scrolTop = res[1].scrollTop;
     
      if(scrolTop + itemH > itemTop + widH/2){
        switch(idName){
        
            case 'an5':
              _this.setData({isan5:true});
            break;
            case 'an6':
              _this.setData({isan6:true});
            break;
        }
      }
    })
  },

注意：transition善用该属性！