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

Question

我正在尝试在关闭 canvas 菜单上设置动画，以便单击另一个元素。一旦单击按钮，这样的 canvas 菜单就会动画化。我的代码如下：

(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);

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

Answer 1

你完全正确，你没有删除 class 但它仍然存在！

CSS 动画运行一旦将 class 添加到元素时将运行，然后不再运行除非动画 class 从 DOM 中删除，然后添加到 DOM。

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

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

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

Animate css with jquery: missing subsequent interations

css

jquery

jquery-animate