When WeChat Mini Programs uses rotatey rotatex animation, the iPhone shows half of it and half of it doesn't show it.

using css and wx.createAnimation to set rotation animation will appear half display and half not display on iPhone. How to solve this problem?

rotating
clipboard.png

clipboard.png

here is my code

    // 
    var animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 50,
      timingFunction: "ease",
      delay: 0
    })
    _this.animation = animation
    animation.rotate3d(1, 0, 0, "-90").step()
    _this.setData({
      pdenterAndOrder: true,
      enterAndOrderType: _this.data.enterAndOrderArr[0].type,
      enterAndOrderName: _this.data.enterAndOrderArr[0].name,
      enterAndOrderUrl: _this.data.enterAndOrderArr[0].avatar,
      animationData: animation.export(),
    })
    setTimeout(function () {
      var animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 500,
        timingFunction: "ease-in",
        delay: 0
      })
      _this.animation = animation
      animation.rotate3d(1, 0, 0, "0").step()
      _this.setData({
        animationData: animation.export(),
      })
      setTimeout(function () {
        var animation = wx.createAnimation({
          transformOrigin: "50% 50%",
          duration: 200,
          timingFunction: "ease",
          delay: 0
        })
        _this.animation = animation
        animation.rotate3d(1, 0, 0, "20").step()
        animation.rotate3d(1, 0, 0, "0").step()
        _this.setData({
          animationData: animation.export(),
        })
        setTimeout(function () {
          _this.setData({
            pdenterAndOrder: false,
          })
        }, 2000)
      }, 600)
    }, 500)
May.22,2021
Menu