如何在关键帧动画/完成时禁用“单击”并启用？

【问题标题】：How to disable "click" while keyframe animation / and enable when it finish?如何在关键帧动画/完成时禁用“单击”并启用？
【发布时间】：2014-07-25 17:12:06
【问题描述】：

我的 css 关键帧动画和 JavaScript 有冲突 - 这里是 http://district52.ru

我想禁用“CRUZ”上的点击功能 - 直到它到达最终位置。

如何在关键帧停止之前禁用“点击”？然后启用它？

P.S.：我不希望 javascript 函数在关键帧结束之前启动！

谢谢，奥斯卡。

【问题讨论】：

您的链接不再可用，因此我无法再查看问题来编辑我的答案。如果我的回答过去对您有所帮助，请将其标记为解决方案。否则，请发布您找到的解决方案，以帮助其他可能遇到相同问题的访问者。

标签： javascript css animation click toggleclass

【解决方案1】：

我看过演示页面，看起来你的关键帧动画不是循环；你可以通过简单的 CSS3 过渡来实现你想要的。如果你使用 jQuery，你可以这样做：

$("#cruz").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
   $(this).addClass("finished");
});
$("#cruz").click(function () {
    if ( !$(this).hasClass("finished") ) return;
    // Here goes the code that will execute if it's not animating
    // Remember to remove the class which you use as filter ("finished")
});

您还可以添加一条 CSS 规则来避免光标显示“可点击”图标，如下所示：

#cruz {
    cursor: initial;
}
#cruz.finished {
    cursor: pointer;
}

【讨论】：