收藏
回答

小程序bug, ios低版本css动画接收不到回调

接收到用户反馈, (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: 500rpx; }
    to      { left: -500rpx; }
}
 
@keyframes moveIn {
    from    { left: -500rpx; }
    to      { left: 500rpx; }
}
 
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.userinfo-avatar {
    position: absolute;
    width: 128rpx;
    height: 128rpx;
    left: 500rpx;
    border-radius: 50%;
}
 
.moveOut {
    animation: moveOut 1s forwards;
}
 
.moveIn {
    animation: moveIn 1s 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",
      });
  }
})


回答关注问题邀请回答
收藏

2 个回答

  • 大道至简
    大道至简
    2018-03-22

    iOS 11.2.6 微信版本6.6.5 也出现这个bug

    2018-03-22
    有用
    回复
  • 哄哄
    哄哄
    2018-03-15

    解决了么?

    2018-03-15
    有用
    回复
登录 后发表内容