Question

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

我想在我的＆＃CRUZ＆＃39;上禁用点击功能 - 直到它进入最终位置。

如何禁用＆＃34;点击＆＃34;直到关键帧停止？然后启用它？

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

谢谢你，奥斯卡。

Answer 1

好吧，我看过演示页面（没有inspect元素），你的关键帧动画不是循环。所以，你可以通过简单的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 removing the class which you use as filter, in this case, "finished"
});

您还可以添加CSS规则，以避免混淆游标行为，如下所示：

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

如果您不喜欢这种类型的过滤器，您也可以使用全局变量（我不会使用）或者反转此脚本的逻辑，例如添加一个名为“动画”的类并更改条件。我希望你能理解我。

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

1 个答案: