使用 jquery 动画 css：缺少后续交互

Question

我正在尝试在单击另一个元素时在画布外菜单上设置动画。一旦单击按钮，这样的画布外菜单就会被动画化。我的代码如下：

(https://jsfiddle.net/shredder11/fhqsmhdz/13/)

问题：

$(".ok_3").click( function () {

    $(".ok_1").css("right", "90%")
    $(".ok_1").css("left", "0px")
  $(".ok_1").css("z-index", "1")
    $(".ok_2").css("opacity", "0.4")

});

$(document).mouseup(f_1);

一旦我运行了一个循环（单击，菜单出现动画，单击使其消失），然后我再次单击按钮，动画不再存在。我不会在任何地方删除课程，所以课程应该仍然存在

Answer 1

你是对的，你没有删除这个类，它仍然存在！

运行一次的 CSS 动画将在将类添加到元素时运行，然后不会再次运行，除非动画类从 DOM 中删除然后添加到 DOM。

一个无限重复的动画显然会无限运行。具有迭代的动画将按照指定的迭代次数运行，但要再次触发该迭代动画，您需要删除该类并将其添加到元素中。

在删除动画和重新添加动画之间需要稍许延迟，因此最好的选择是检查 animationend 事件并在此时删除该类。或者删除该类，然后使用setTimeout() 添加延迟。不要链接removeClass("fadeInLeft").addClass("fadeInLeft")，因为不会有延迟。