接收到用户反馈, (ipone6, ios 8.2, 微信 6.6.1),(iphone6s 8.1.3 微信 6.6.1) ,这种ios 版本时,
css 动画的回调函数不会播放,(其它版本未测试)
wxml 测试源码如下:
< view class = "container" > < image bindtap = "bindViewTap" class = "userinfo-avatar {{anim}}" src = "{{userInfo.avatarUrl}}" background-size = "cover" bind:animationend = "animationCallback" ></ image > </ view > |
wxss 测试源码如下:
@keyframes moveOut{ from { left : 500 rpx; } to { left : -500 rpx; } } @keyframes moveIn { from { left : -500 rpx; } to { left : 500 rpx; } } .userinfo { display : flex; flex- direction : column; align-items: center ; } .userinfo-avatar { position : absolute ; width : 128 rpx; height : 128 rpx; left : 500 rpx; border-radius: 50% ; } .moveOut { animation: moveOut 1 s forwards; } .moveIn { animation: moveIn 1 s forwards; } |
JS 测试源码如下:
//index.js //获取应用实例 const app = getApp() Page({ data: { motto: 'Hello World' , userInfo: {}, hasUserInfo: false , canIUse: wx.canIUse( 'button.open-type.getUserInfo' ), anim: "" , }, onLoad: function () { if (app.globalData.userInfo) { this .setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if ( this .data.canIUse){ app.userInfoReadyCallback = res => { this .setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this .setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } let self = this ; setTimeout(()=>{ self.setData({ anim: "moveOut" , }, response=>{} ); }, 2000); }, getUserInfo: function (e) { console.log(e) app.globalData.userInfo = e.detail.userInfo this .setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }, animationCallback: function (e) { console.error(e); this .setData({ anim: "moveIn" , }); } }) |
iOS 11.2.6 微信版本6.6.5 也出现这个bug
解决了么?