wxml页面上有class = ‘my-animate’样式为display:none;的元素,同时也有class = ‘my-animate’样式为display:block;的元素,用this.animate方法会导致callback不触发
<view class="my-animate" style="display:none;"></view>
<view class="my-animate"></view>
this.animate('.my-animate', [
{ top: '37%', opacity: 1 },
{ top: '0%' },
], 3000,function(){
// 不会触发
});
用id选择器就执行了
参考一下官方的代码片段:https://developers.weixin.qq.com/s/pgcpIrmR7ai3,执行完之后,是会触发回调函数的
参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html#%E5%85%B3%E9%94%AE%E5%B8%A7%E5%8A%A8%E7%94%BB,
基础库版本要2.9.0以上。
<!--index.wxml-->
<view id="container" style="{{containerStyle}}">
<button class="block" style="width: 300rpx; margin: 100rpx auto;">示例按钮</button>
<!-- 其他代码不用修改 -->
<!-- 将sytle属性的display: block;改成display: none; -->
<a class="block" style="display: none; margin: 100rpx auto; width: 300rpx; text-align: center;">示例超链接</a>
<text class="block" style="display: block; margin: 100rpx auto; width: 300rpx; text-align: center;">示例文本</text>
</view>
<text>\n\n</text>
<view id="container1" style="{{containerStyle1}}">
<button class="block1" style="width: 300rpx; margin: 100rpx auto;">示例按钮</button>
<a class="block1" style="display: block; margin: 100rpx auto; width: 300rpx; text-align: center;">示例超链接</a>
<text class="block1" style="display: block; margin: 100rpx auto; width: 300rpx; text-align: center;">示例文本</text>
</view>
<button bindtap = "change">开启动画</button>
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
containerStyle: '',
containerStyle1: '',
},
onLoad: function () {
this.animate('#container', [
{ opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
{ opacity: 0.5, rotate: 45, backgroundColor: '#00FF00' },
{ opacity: 1.0, rotate: 90, backgroundColor: '#FF0000' },
], 5000)
this.animate('.block', [
{ scale: [1, 1], rotate: 0, ease: 'ease-out' },
{ scale: [1.5, 1.5], rotate: 45, ease: 'ease-in'},
{ scale: [2, 2], rotate: 90 },
], 5000, function(){ // 只在这里添加了回调方法
console.log("回调");
})
},
change: function () {
this.animate('#container1', [
{ opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
{ opacity: 0.5, rotate: 45, backgroundColor: '#00FF00', offset: 0.9},
{ opacity: 0.0, rotate: 90, backgroundColor: '#FF0000' },
], 5000, function () {
this.clearAnimation('#container1', { opacity: true, rotate: true }, function () {
console.log("清除了#container上的动画属性")
})
}.bind(this))
this.animate('.block1', [
{ scale: [1, 1], rotate: 0, ease: 'ease-out' },
{ scale: [1.5, 1.5], rotate: 45, ease: 'ease-in', offset: 0.9},
{ scale: [2, 2], rotate: 90},
], 5000, function () {
this.clearAnimation('.block1', { scale: true, rotate: true}, function () {
console.log("清除了.block1上的动画属性")
})
}.bind(this)
)
},
})