元素运用animation动画，部分机型tap事件点击没反应
发布于 5 年前 作者 jing21 17253 次浏览 来自 问答

元素运用animation动画，部分IOS、和安卓机型tap事件点击不能及时反应,需要多次点击并且在一段时间后才会触发点击事件,

- 预期表现

    每次点击都能按时触发tag事件

.float-redpacket-item {
    position: absolute;
    z-index: 6;
    width: 136rpx;
    height: 136rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation-timing-function: linear;

    text-align: center;

background-color: black;

}
.float-redpacket-item-animation_0 {
    top: 60rpx;
    left: 600rpx;
    animation-name: myMove_1;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}
[@keyframes](/user/keyframes) myMove_1 {
    0% {
        transform: translateX(0) translateY(0);
    }
    10% {
        transform: translateX(-100rpx) translateY(50);       
    }
    20% {
        transform: translateX(-200rpx) translateY(100rpx);
    }
    30% {
        transform: translateX(-300rpx) translateY(200rpx);
    }
    40% {
        transform: translateX(-400rpx) translateY(350rpx);
    }
    50% {
        transform: translateX(-450rpx) translateY(380rpx);
    }
    60% {
        transform: translateX(-620rpx) translateY(450rpx);
    }
    70% {
        transform: translateX(-350rpx) translateY(780rpx);
    }
    80% {
        transform: translateX(-200rpx) translateY(500rpx);
    }
    90% {
        transform: translateX(-100rpx) translateY(200rpx);
    }
    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);
}
2 回复

提供一下出现问题的机型和微信版本，以及能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。

我这边测试，不太稳定，10次只有两次触发。。。

回到顶部