如何在關鍵幀動畫時禁用“單擊”/並在完成時啟用？

Question

我的 css Keyframe 動畫和 JavaScript 有沖突 - 這里是http://district52.ru

我想禁用我的“CRUZ”上的點擊功能 - 直到它進入最終位置。

如何禁用“單擊”直到關鍵幀停止？ 然后啟用它？

PS：我不希望javascript函數在關鍵幀結束之前啟動！

謝謝你，奧斯卡。

Answer 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;
}