收藏
回答

IOS css动画闪屏

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug iOS IOS iPhone6p 6.6.7

纯css  做的水波纹动画    安卓机上没问题   但是用苹果手机测试   却出现闪屏效果

<view class='recordPart wavePart' bindtap='stopRecord' wx:if="{{recoding == false}}">

    <view class='wave wave1'><image src='/images/speaker_icon.png'></image></view>

    <view class='wave wave2'></view>

    <view class='wave wave3'></view>

    <view class='wave wave4'></view>

</view>


.wavePart {

position: relative;


}

@-webkit-keyframes opac{

from {

opacity: .5;

width:100%;

height:100%;

top:50%;

left:50%;

}

to {

opacity : 0;

width:200%;

height:200%;

top:50%;

left:50%;

}

}

.wave {

position: absolute;

top: 50%;

left: 50%;

width:100%;

height: 100%;

-webkit-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

background-color: var(--main-color);

border-radius: 50%;

}

.wave1 {

z-index: 2;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

}

.wave2,

.wave3,

.wave4 {

-webkit-animation: opac 3s infinite;

}

.wave3{

-webkit-animation-delay: 1s;

/*border-color: green;*/

}

.wave4{

-webkit-animation-delay: 2s;

/*border-color: red;*/

}

.wave1 image {

width: calc(var(--base-size)*76rpx);

height: calc(var(--base-size)*111rpx);

}



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

5 个回答

  • 晨
    2018-06-28

    麻烦给个代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    2018-06-28
    有用
    回复
  • 冷风吹
    冷风吹
    2018-12-15

    我也会闪 我用js写的动画 神烦

    2018-12-15
    有用
    回复
  • 吴勤发
    吴勤发
    2018-12-12

    不单只是小程序,公众号也有这个问题,甚至是 mac 的 Safari 浏览器也是


    http://www.shejidaren.com/css3-ripple-dot.html


    ——怀疑是否是 animation 的 infinite + delay造成的问题?




    如上图,只要设置了 delay 以及动画无限循坏的话,在最后动画播放了一轮并且等待下一次播放时,会闪一下


    另外,将微信放在后台运行,再次进入时也会发生类似情况


    2018-12-12
    有用
    回复
  • 王磊(Rocks)
    王磊(Rocks)
    2018-07-20

    我也遇到类似问题,iOS上的CSS3 animation有问题,连续播放的没问题,单次执行的的各种问题,至今没发现规律。

    求官方修复!

    2018-07-20
    有用
    回复
  • Eu
    Eu
    2018-07-09

    同样遇到了这个问题,感觉CSS动画在IOS机型上没有执行。

    2018-07-09
    有用
    回复
登录 后发表内容