jQuery + Animate.css动画只能工作一次，动画不会重置。

Question

我正在尝试每次按下按钮时重现特定的动画。

具体来说，我正在使用jQuery和animate.css库实现此效果：在按钮点击时，将两个类（fadeInDown animated）添加到要进行动画处理的元素上。

动画确实可以正常工作，但仅限于一次。为什么会这样呢？

Fiddle：http://jsfiddle.net/jqm4vjLj/2/

我希望每次单击按钮时都重置动画，即使它从先前的单击中完成了一半。它还应该在每次单击按钮时都能正常工作，而不仅仅是一次。

JS：

$("#button").click(function () {
    $("#button").removeClass();
    $("#button").addClass("fadeInDown animated");
});

animate.css 中的类：

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

- Tiago

Answer 1

一种更安全的方法是使用动画结束事件，例如：

$("#button").click(function() {
  $("#button").addClass("fadeInDown animated").one('animationend webkitAnimationEnd oAnimationEnd', function() {
    $("#button").removeClass();
  });
});

#button {
  height: 30px;
  width: 120px;
  border: 1px solid black;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="button"></div>

- Arun P Johny

---

啊，这似乎是我在寻找的。您能否好心解释一下为什么动画前后有重复的.removeClass()方法？ - Tiago

@Tiago 忘记移除它了... 不需要。 - Arun P Johny

谢谢@Arun提供的好答案，但我决定采用bgoldst的建议。它完全符合我的要求。 - Tiago

这种方法比克隆整个元素更加简洁。 - Max Mumford

Answer 2

请参阅http://css-tricks.com/restart-css-animation/，该网页讨论了这个具体的问题。

我觉得最干净的解决方案是将删除元素并重新插入到HTML树中相同位置的功能封装到一个全局函数中。这样，当您想要重新启动动画时，只需删除类，调用重置函数（从返回值中获取新插入的元素），然后再添加动画类以重新启动动画。

例如：

function reset($elem) {
    $elem.before($elem.clone(true));
    var $newElem = $elem.prev();
    $elem.remove();
    return $newElem;
} // end reset()

$("#button").click(function () {
    var $this = $(this);
    $this.removeClass();
    $this = reset($this);
    $this.addClass("fadeInDown animated");
});

这个解决方案提供了最大的响应性，因为在动画元素被销毁时，旧的正在进行的动画会自动结束，并且新插入的元素的动画立即开始。

http://jsfiddle.net/jqm4vjLj/6/

- bgoldst

---

这太棒了。这个帖子中有很多好答案，但是这段代码完全符合我的要求。谢谢。 - Tiago

我也在写同样的答案，但被抢先了！其他答案都不正确，因为它们都等待动画完成，而@Tiago说即使没有完成，它也应该重新启动。 - blex

@blex 完全正确。我很高兴能找到这样精确的解决方案。感谢大家。 - Tiago

Answer 3

对我来说，简单的解决方案是在添加类之前启动回流过程。 例如，可以通过“更改”元素的宽度来实现。我认为回流过程比节点重新插入对浏览器更快，并且在编码方面更简单。 在jQuery中：

$(this)
  .removeClass('myAnimation')
  .width('auto') // the magic
  .addClass('myAnimation')

- vatavale

---

我有一个自定义的宽度。所以我做的是隐藏然后显示。 - Abdul Saleem

Answer 4

在动画完成后，您需要删除类，但直接使用removeClass不起作用，因为它不会让动画完成，而是使用setTimeout

请参阅此http://jsfiddle.net/jqm4vjLj/4/

   $("#button").click(function () {

        $("#button").addClass("fadeInDown animated");
        setTimeout(function(){ $("#button").removeClass("fadeInDown animated");},100)
    });

- Naeem Shaikh

Answer 5

问题是它立即删除类，然后添加类，所以我只是添加了一个新的带有button2 id的div，在其单击时仅删除类，然后再次单击按钮div，它将进行动画。

所以问题是你需要在动画完成后才能这样做。

$("#button1").click(function () {
    $("#button").removeClass();
});

这里有个fiddle: http://jsfiddle.net/jqm4vjLj/5/

- Jenish Rabadiya

---

有趣。然而这并不符合我的要求。让用户重置动画是行不通的。你是在说我需要设置一个超时来允许动画完成后再移除类吗？ - Tiago

@Tiago 是的，我的意图也是如此，但你应该接受Arun的答案，他很棒。非常好的回答...！ - Jenish Rabadiya

Answer 6

这对我有用，来自animate.css的github：

animateCss: function (animationName) {
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    $(this).addClass('animated ' + animationName).one(animationEnd, function() {
        $(this).removeClass('animated ' + animationName);
    });
}

- Galen

Answer 7

也许这是您问题的好解决方案：

https://jsfiddle.net/d2c16fk7/3/

在您的JavaScript中，类.animation和.fadeInDown被添加到#button，之后您就拥有了这些类，无法再次添加它们。

- Arkenia

Answer 8

要重置元素，我们必须让 CSS 重新计算，对吧？所以我做的是隐藏然后再显示该元素。我所做的是 removeClass() 然后 hide() 再 show() 最后 addClass()

$("#button").click(function () {
    $("#button").removeClass("fadeInDown animated").hide();
    $("#button").show().addClass("fadeInDown animated");
});

- Abdul Saleem