Javascript jQuery+；Animate.css动画仅工作一次，动画不重置

我试图在每次按下按钮时重现一个特定的动画

具体地说，我使用了

jQuery

和

animate.css

库来实现这个效果：单击按钮时，一个类被添加到我想要设置动画的元素中（确切地说是两个类：

fadeInDown animated

）

动画确实可以正常工作，但只能工作一次。为什么会这样

小提琴：

我希望每次单击按钮时动画都会重置，即使是在上一次单击完成的中途。每当我点击按钮时，它也应该工作，而不仅仅是一次

JS:

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

---

动画完成后需要删除类

但是直接使用

removeClass

不起作用，因为它不会让动画完成，而是使用

setTimeout

看到这个了吗

---

问题是它会立即删除类，然后添加类，所以我只添加了Button2id的新div，点击它就可以删除类，然后再次点击按钮div，它会设置动画

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

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

---

fiddle在这里：

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

$（“#按钮”）。单击（函数（）{
$（“#按钮”）.addClass（“fadeInDown动画”）.one（'animationend webkitAnimationEnd oAnimationEnd'，函数（）{
$（“#按钮”）.removeClass（）；
});
});
#按钮{
高度：30px；
宽度：120px；
边框：1px纯黑；
}
.动画{
-webkit动画持续时间：1s；
动画持续时间：1s；
}
@-webkit关键帧淡入淡出淡入{
0% {
不透明度：0；
-webkit转换：translateY（-20px）；
转换：translateY（-20px）；
}
100% {
不透明度：1；
-webkit转换：translateY（0）；
变换：translateY（0）；
}
}
@关键帧淡入淡出{
0% {
不透明度：0；
-webkit转换：translateY（-20px）；
-ms变换：translateY（-20px）；
转换：translateY（-20px）；
}
100% {
不透明度：1；
-webkit转换：translateY（0）；
-ms变换：translateY（0）；
变换：translateY（0）；
}
}
法德恩敦先生{
-webkit动画名称：fadeInDown；
动画名称：fadeInDown；
}

请参阅，其中讨论了这个确切的问题

我认为最干净的解决方案是将删除元素并将其重新插入全局函数中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");
});


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


在javascript中，类
.animation
和
.fadeInDown
被添加到
#按钮
中，之后您拥有了这些类，无法再添加它们。
对我来说，简单的解决方案是在添加类之前启动回流过程。
例如，您可以通过“更改”元素的宽度来实现。我认为对于浏览器来说，回流过程比重新插入节点更快。而且它在编码方面更简单。
在jQuery中：

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

这在animate.css github中对我有用：

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

要重置元素，我们必须重新计算css，对吗？所以我做的是隐藏然后显示元素。我所做的是删除类（），然后隐藏（），然后显示（）和添加类（）

有趣。但是，这不符合我的要求。让用户重置动画将不起作用。你是说我需要做的是设置一个超时，让动画在移除类之前完成吗？@Tiago是的，我的意图是这样的，但你应该接受Arun的回答，他太棒了。很好的回答。。。！啊，这似乎就是我要找的。请您解释一下为什么在动画之前和之后都使用了duplicate.removeClass（）方法？@Tiago忘了删除它。。。不需要谢谢你@Arun给了我很好的回答，但我决定接受bgoldst的建议。这正是我想要的。这感觉像是一个比克隆整个元素更干净的解决方案。这太棒了。这篇文章的答案很好，但这段代码完全符合我的要求。谢谢。我写的是同样的答案，但是被打败了！其他答案都不正确，因为它们都在等待动画完成，@Tiago说即使没有完成动画也应该重新启动。@blex完全正确。我真的很高兴找到如此精确的解决方案。谢谢大家。我有一个自定义宽度。所以我做的是先藏后秀
$(this)
  .removeClass('myAnimation')
  .width('auto') // the magic
  .addClass('myAnimation')

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

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