元素运用animation动画,部分IOS、和安卓机型tap事件点击不能及时反应,需要多次点击并且在一段时间后才会触发点击事件,
- 预期表现
每次点击都能按时触发tag事件
.float-redpacket-item { position : absolute ; z-index : 6 ; width : 136 rpx; height : 136 rpx; background- size : 100% 100% ; background-repeat : no-repeat ; animation-timing-function: linear;
} .float-redpacket-item-animation_ 0 { top : 60 rpx; left : 600 rpx; animation-name: myMove_ 1 ; animation-duration: 20 s; animation-iteration-count: infinite; } @keyframes myMove_ 1 { 0% { transform: translateX( 0 ) translateY( 0 ); } 10% { transform: translateX( -100 rpx) translateY( 50 ); } 20% { transform: translateX( -200 rpx) translateY( 100 rpx); } 30% { transform: translateX( -300 rpx) translateY( 200 rpx); } 40% { transform: translateX( -400 rpx) translateY( 350 rpx); } 50% { transform: translateX( -450 rpx) translateY( 380 rpx); } 60% { transform: translateX( -620 rpx) translateY( 450 rpx); } 70% { transform: translateX( -350 rpx) translateY( 780 rpx); } 80% { transform: translateX( -200 rpx) translateY( 500 rpx); } 90% { transform: translateX( -100 rpx) translateY( 200 rpx); } 100% { transform: translateX( 0 ) translateY( 0 ); } } |
< view class = "float-redpacket-box" > < view class = "float-redpacket-item float-redpacket-item-animation_0" catchtap = "friendSignOpenFriendPacket" > </ view > </ view > |
friendSignOpenFriendPacket(e) { console.log(e); } |
我这边测试,不太稳定,10次只有两次触发。。。
提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
机型是IPhone 6s,系统版本是IOS12.0,微信版本是6.7.3
代码片段wechatide://minicode/ioFh70mJ7r3s
在开发工具上不会出现,在真机上才会
这边测试每次点击是都可以
麻烦看一下这个问题
https://developers.weixin.qq.com/community/develop/doc/000ec4ad28820036d9774ef0f56400