收藏
回答

animation动画效果不一致,真机会有问题

问题模块 框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小程序 Bug iOS iOS11.3 iPhone7 Plus 6.6.6


真机的动画效果总是会跟开发者工具上不一致,比如:

@keyframes moveHandLeftAndRight{

0%{

left:30%;

opacity: 0.8;

}

25%{

left:5%;

opacity:0.1;

}

50%{

left:30%;

opacity:0.8;

}

75%{

left:55%;

opacity:0.1;

}

100%{

left:30%;

opacity:0.8;

}

}


在实际真机上显示效果却是:

@keyframes moveHandLeftAndRight{

0%{

left:30%;

opacity: 0.1;

}

25%{

left:5%;

opacity:0.8;

}

50%{

left:30%;

opacity:0.1;

}

75%{

left:55%;

opacity:0.8;

}

100%{

left:30%;

opacity:0.1;

}

}


就是opacity效果反过来了,还有就是有些keyframes设置top从80%到60%,真机上也没有效果反应出来


代码片段:wechatide://minicode/kKR3Kzmj69Zk


最后一次编辑于  2018-05-21
回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    2018-05-21

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

    2018-05-21
    赞同
    回复 4
    • Mastery
      Mastery
      2018-05-21
      wechatide://minicode/kKR3Kzmj69Zk
      2018-05-21
      回复
    • 小程序技术专员-june
      小程序技术专员-june
      2018-05-22回复Mastery
      我这边试了下貌似没有问题。你那边能否录个异常表现的小视频,我看下具体的差异?
      2018-05-22
      回复
    • Mastery
      Mastery
      2018-05-22回复小程序技术专员-june
      模拟器运行情况视频:http://v.youku.com/v_show/id_XMzYyMDU5OTY0OA==.html?spm=a2h3j.8428770.3416059.1 真机运行情况视频:http://v.youku.com/v_show/id_XMzYyMDYwMDg1Mg.html?spm=a2h0j.11185381.listitem_page1.5!2~A 其中我试过了华为的v10手机,是跟模拟器运行情况一样的,没有出问题的。 出问题的是我的iPhone 7 Plus,iOS11.3,微信6.6.6 其中发现两个animation问题,一个是opacity不会从0->1逐渐变化或者变化错了,二是height不会有变大的动画效果
      2018-05-22
      回复
    • Mastery
      Mastery
      2018-05-23回复小程序技术专员-june
      请问已经修复了吗?我现在测试已经没有问题了
      2018-05-23
      回复