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

Question

我每次按下按钮时都会尝试重现特定的动画.

具体来说,我正在使用jQuery和animate.css库这个效果:在按钮单击时,一个类被添加(两个类来确切:):fadeInDown animated我想要动画的元素.

动画确实可以正常工作,但只能运行一次.为什么是这样？

小提琴: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;
}

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>

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/

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