jQuery + Animate.css动画只工作一次，动画不重置 [英] jQuery + Animate.css animation only working once, animation not resetting

问题描述

具体来说，我使用 jQuery 和 animate.css 这个效果：在按钮点击，添加一个类（两个类是准确的： fadeInDown animated

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

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

我希望动画在每次点击按钮时重置，即使它是从前一次点击完成的一半。

JS：

 
 code> $（＃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; 
} 
  

解决方案

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

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

例如：

 函数重置（$ elem）{
 $ elem.before（$ elem.clone（true））; 
 var $ newElem = $ elem.prev（）; 
 $ elem.remove（）; 
 return $ newElem; 
} //结束重置（）
 
 $（＃button）。click（function（）{
 var $ this = $（this）; 
 $ this.removeClass（）; 
 $ this = reset（$ this）; 
 $ this.addClass（fadeInDown animated）; 
}）; 
  

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

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

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

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

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

Fiddle: 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:

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

Classes from 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;
}

解决方案

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

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.

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/

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.

这篇关于jQuery + Animate.css动画只工作一次，动画不重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！