组件在执行动画后隐藏组件,再次显示组件并且再次执行动画时 animation 会执行动作,但是没有动画效果。
必须重新执行一下重置的动画,才能再次执行动画。就我代码里注释的那一段。
为何要重新的把动画回到原处,才能执行下一次的动画,感觉完全没有必要啊?如果是差值问题,我寻思动画里最后也回到原处了呀?
代码很简单, 注释掉的那段就是解决方案。(顺便说下论坛编辑器里的插入代码格式都是乱的。。)
<view class="intro">
<block wx:if="{{num <= 0}}">
<view class="goumai" style="background-color:darkgray" >{{num}}</view>
</block>
<block wx:if="{{num > 0}}">
<view class="goumai" animation="{{ani}}">{{num}}</view>
</block>
<button bindtap="jia">+</button>
<button bindtap="jian">-</button>
</view>
js的代码
jia:function(){
var that = this;
this.setData({
num:that.data.num + 1
});
setTimeout(function () {
var animation = wx.createAnimation({
duration: 100,
timingFunction: 'linear',
delay: 0,
});
animation.translateY(6).step();
animation.translateY(-6).step();
animation.translateY(0).step();
that.setData({
ani: animation.export()
});
}, 100);
},
jian:function(){
var that = this;
if (that.data.num - 1 < 0) return;
this.setData({
num: that.data.num -1
})
// setTimeout(function () {
// var animation = wx.createAnimation({
// duration: 100,
// timingFunction: 'linear',
// delay: 0,
// });
// animation.translateY(0).step();
// that.setData({
// ani: animation.export()
// });
// }, 100);
}
在此之前,需要了解 存在“动画结束”这个事件,各个版本的浏览器监听的不同:
var animations = {
"animation": "animationend",
"OAnimation": "oAnimationEnd",
"MozAnimation": "animationend",
"WebkitAnimation": "webkitAnimationEnd"
}
具体都是对应的什么浏览器大家自己去了解一下。
所以给每一个span绑定监听事件就可以了:
$(".st_apples span").each(function() {
// 目前只设置兼容谷歌浏览器
$(this)[0].addEventListener("webkitAnimationEnd",function(){
// 动画结束就直接去除这个动画
$(this).css("animation","");
});
});
然后记得将上面的添加删除class的操作直接改为添加删除animation:
$(".st_apples span[data-value="+remark+"]").css("animation","changeBg 3s linear");
因为动画结束到监听事件的内部代码(去除动画)执行完成存在一定的延迟。所以如果你的代码中存在定时器,那么请将定时器的时间稍微设置的比动画时间大一点,我一般设置1秒。
this.setData({
num:that.data.num + 1
},()=>{
动画代码
})