//xx.wxml
<view id="an7" class="box {{isan4?'jiazaihou':''}}">
nih
</view>
//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善用该属性！
