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

jQuery + Animate.css animation only working once, animation not resetting

提问by Tiago

I'm trying to reproduce a specific animation each time a button is pressed.

每次按下按钮时，我都试图重现特定的动画。

Specifically, I'm using jQueryand the animate.csslibrary for this effect: on button click, a class is added (two classes to be precise: fadeInDown animated) to the element I want to animate.

具体来说，我正在使用jQuery和animate.css用于此效果的库：单击按钮时，将一个类（准确地说是两个类：）添加fadeInDown animated到我想要动画的元素中。

The animation does work correctly, but only once. Why is this?

动画确实正常工作，但只有一次。为什么是这样？

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

小提琴：http: //jsfiddle.net/jqm4vjLj/2/

I want the animation to reset every time I click the button, even if it is halfway through completion from a previous click. It should also work whenever I click the button, not only once.

我希望每次单击按钮时动画都重置，即使它从上次单击完成到一半。每当我单击按钮时，它也应该起作用，而不仅仅是一次。

JS:

JS：

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

Classes from animate.css:

来自 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;
}

回答by Arun P Johny

A much safer approach will be use the animation end event like

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

$("#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>

回答by bgoldst

See http://css-tricks.com/restart-css-animation/, which discusses this exact problem.

请参阅http://css-tricks.com/restart-css-animation/，其中讨论了这个确切的问题。

I think the cleanest solution is to wrap the functionality of removing the element and re-inserting it in the same position in the HTML tree in a global function. Then, when you want to restart an animation, you just remove the class, call the reset function (grabbing the newly-inserted element from the return value), and then add the animation class(es) back to start the animation again.

我认为最干净的解决方案是将删除元素并将其重新插入到全局函数中 HTML 树中相同位置的功能进行包装。然后，当您想重新启动动画时，只需删除该类，调用重置函数（从返回值中获取新插入的元素），然后重新添加动画类以再次启动动画。

For example:

例如：

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/

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

This solution provides maximum responsiveness, since the old in-progress animation is automatically ended when the animating element is destroyed, and the newly-inserted element's animation begins immediately.

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

回答by Naeem Shaikh

You need to remove class after the animation is complete,

动画完成后需要移除类，

but directly using removeClasswont work, because it will not let animation complete, instead use setTimeout

但是直接使用是removeClass不行的，因为它不会让动画完成，而是使用setTimeout

see this http://jsfiddle.net/jqm4vjLj/4/

看到这个http://jsfiddle.net/jqm4vjLj/4/

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

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

回答by vatavale

The simple solution for me is to start reflow process before adding class. You can do it for example by "change" width of element. I think reflow process is faster for browser then node reinserting. And its simpler in terms of coding. In jQuery:

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

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

回答by Galen

This works for me, from the animate.css github:

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

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

回答by Jenish Rabadiya

Problem is it immediately remove class and then add class so I just added new div with button2 id and on its click it just remove class and then click again on button div it would animate.

问题是它立即删除类，然后添加类，所以我只是添加了带有 button2 id 的新 div 并单击它只是删除类，然后再次单击按钮 div 它将设置动画。

so problem is you need to do it after completion of animation.

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

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

fiddle is here: http://jsfiddle.net/jqm4vjLj/5/

小提琴在这里：http: //jsfiddle.net/jqm4vjLj/5/

回答by Arkenia

maybe this is good solution for your problem:

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

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

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

In your javascript the classes .animationand .fadeInDownwere added to the #buttonand after that you had these classes and you couldn't add it again.

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