小程序wxss使用css3的keyframes实现扫描动画在真机上没有效果?
发布于 7 年前 作者 xuyong 8118 次浏览 来自 问答

rt,谢谢大佬们

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

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

1 回复

真机:安卓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秒

回到顶部