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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中可以使用CSS动画实现元素的动态效果。你可以通过在WXSS文件中定义动画关键帧和动画属性来创建CSS动画。 首先,在WXSS文件中定义一个`@keyframes`规则,用于定义动画的关键帧。例如,你可以定义一个名为`myAnimation`的动画,其中包含从初始状态到结束状态的关键帧: ```css @keyframes myAnimation { 0% { transform: translateX(0); } 50% { transform: translateX(50px); } 100% { transform: translateX(100px); } } ``` 接下来,在需要应用动画的元素上使用`animation`属性。例如,你可以将动画应用于一个`<view>`元素: ```html <view class="my-element" animation="{{animationData}}">Hello, World!</view> ``` 然后,在对应的JS文件中,定义一个动画数据对象,并在需要触发动画时更新该对象: ```javascript Page({ data: { animationData: {} }, onLoad: function() { var animation = wx.createAnimation({ duration: 1000, timingFunction: 'ease', }) this.animation = animation }, startAnimation: function() { this.animation.translateX(100).step() this.setData({ animationData: this.animation.export() }) } }) ``` 上述代码中,`onLoad`函数中创建了一个动画对象,并将其赋值给`this.animation`。在`startAnimation`函数中,我们通过调用动画对象的方法来定义动画效果,然后使用`export`方法将动画数据导出,并通过`setData`方法更新页面中的动画数据。 最后,你可以在需要触发动画的时候调用`startAnimation`函数,从而应用动画效果。 这是一个简单的示例,你可以根据具体需求自定义动画的属性和关键帧。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值