如何禁用“点击”;而关键帧动画/并在完成时启用

How to disable "click" while keyframe animation / and enable when it finish?

本文关键字：动画 启用 完成时 关键帧 何禁用 点击      更新时间：2023-09-26

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

我想在我的"CRUZ"上禁用点击功能-直到它显示最终位置。

如何禁用"点击"，直到关键帧停止?之后呢?

注::我不希望javascript函数直到关键帧结束才开始!

谢谢,奥斯卡。

我看过演示页面，它看起来像你的关键帧动画不是一个循环;你可以用简单的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规则来避免光标显示"clickable"像这样的图标:

#cruz {
    cursor: initial;
}
#cruz.finished {
    cursor: pointer;
}
相关文章：