收藏
回答

使用 rotatey rotatex动画时 苹果手机一半显示一半不显示

问题模块 框架类型 问题类型 提审时间 AppID
审核 小程序 Bug 2018-09-02 wx3821d2a1031ee528

- 当前 Bug 的表现(可附上截图)

使用css和wx.createAnimation 设置旋转动画在苹果手机上会出现一半显示一半不显示的情况

旋转中


旋转完成后正常


- 预期表现


- 复现路径


- 提供一个最简复现 Demo

.enterAndOrder {

width: 265rpx;

animation: myfirst 3s linear 0s infinite normal;

/* Firefox: */

-moz-animation: myfirst 3s linear 0s infinite normal;

/* Safari 和 Chrome: */

-webkit-animation: myfirst 3s linear 0s infinite normal;

/* Opera: */

-o-animation: myfirst 3s linear 0s infinite normal;

}


@keyframes myfirst {

0% {

transform:rotatey(-90deg);

}


25% {

transform:rotatey(0deg);

}

30% {

transform:rotatey(20deg);

}

35% {

transform:rotatey(0deg);

}


95% {

opacity: 1;

}

100% {

opacity: 0;

}

}


最后一次编辑于  2018-09-02  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

9 个回答

  • 娇华
    娇华
    2018-09-03

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-09-03
    赞同
    回复 7
    • 陈航
      陈航
      2018-09-14

      wechatide://minicode/D9BtCqmV7z2u

      2018-09-14
      赞同
      回复
    • 娇华
      娇华
      2018-09-17回复陈航

      我这边在ios、Android测试是正常的,请问具体的机型、微信版本是什么呢?

      2018-09-17
      赞同
      回复
    • 陈航
      陈航
      2018-09-17

      感谢回复,已经解决了。

      rotateY 的时候,需要同时 translateZ 才行


      2018-09-17
      赞同
      回复
    • 谢恒杰
      谢恒杰
      2018-09-20回复陈航

      你好,请问可以详细说下嘛,translateZ值怎么设置


      2018-09-20
      赞同
      回复
    • 陈航
      陈航
      2018-09-20回复谢恒杰

      .fliping {

      transform: translateX(-1px) translateZ(1000px) rotateY(180deg);

      }

      比较简单粗暴的设置例子

      2018-09-20
      赞同
      回复
    查看更多(2)
  • 陈航
    陈航
    2018-09-14

    wechatide://minicode/D9BtCqmV7z2u

    2018-09-14
    赞同
    回复