收藏
回答

小程序wxss使用css3的keyframes实现扫描动画在真机上没有效果?

rt,谢谢大佬们

代码片段:https://developers.weixin.qq.com/s/lmdfHzmt7yeO

在开发者工具上能出现扫描动画效果,但是使用真机调试就不行

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

2 个回答

  • 学习使我快乐
    学习使我快乐
    2020-01-23

    真机:安卓vivoxplay6 wx:7.0.10

    代码:在提供的代码片段上进行


    Action1:我以为是属性不兼容到问题,尝试了拆开已经兼容性写法,依旧么用


    Action2:为了看明显效果,我尝试使用改变边框色彩,以及替换为一个cover-view运动的方式,结果得出的效果是只会执行一次,并不是完全没效果,只是animation只会执行一次,并且十分卡顿,所以与元素的区别无关


    Action3:猜想是不是因为调起扫描就直接使用动画,过于卡顿导致动画直接崩溃的原因,或者是因为刚加载完小程序资源的原因,尝试了使用a:if去控制调用扫描,发现作用不大,失败几率很高,虽然偶尔可以达到预期效果


    Action4:既然可能是抢占资源的原因,那么晚一点调用动画呢,一番尝试成功



    结论:

    1、必须给图片加上border属性:border: 1rpx solid rgba(0, 0, 0, 0);

    2、必须给动画加上delay延时 animation-delay: 2s;

    这个延时可以根据自己的需求进行调整,我反复试过,理想的就是1、2秒

    2020-01-23
    有用 1
    回复
  • Marco
    Marco
    2020-08-28

    是的,一开始我也以为加私有属性兼容啥的一个个排查也是不行,然后看到你的方法是可以的

    2020-08-28
    有用
    回复
登录 后发表内容
问题标签