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))},})