camera中的cover-view使用动画,工具上有效果,真机上无动画?
---template---
<camera class="thecars" mode="scanCode" device-position="back" :flash="to_flash" [@error](/user/error)="error" [@scancode](/user/scancode)="scancode">
<cover-view [@click](/user/click)="open_flash" class="cemar">{{ to_flash == 'off' ? '打开' : '关闭' }}闪光灯</cover-view>
<cover-view class="thebor">
<cover-view class="acting"></cover-view>
</cover-view>
</camera>
---css---
[@keyframes](/user/keyframes) act{
from{
top:20%;
}to{
top: 80%;
}
}
.thecars {
position: relative;
width: 100%;
height: 420rpx;
.thebor {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
border: 4rpx solid #4CD964;
bottom: 0;
padding: 20rpx;
width: 80%;
height: 280rpx;
.acting{
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 60%;
height: 4rpx;
background-color: #4CD964;
box-shadow: 0 -5px 10px green;
animation: act 1s linear alternate infinite;
}
}
.cemar {
background-color: white;
color: black;
padding: 10rpx 0;
font-size: 22rpx;
display: inline-block;
width: 24%;
position: absolute;
right: 0;
}
}
使用camera制作原生嵌入页面的扫描窗口,然后使用css制作一个扫描动态效果,开发者工具上是有效果的,然后预览或者真机调试是无动画的,直接就是开始喝结束的两条横线。是因为cover-view内不支持这个animation吗。
同时试过直接使用view,这是没有问题的,工具喝真机都是正常。
1 回复
你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)