Question

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

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

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

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

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树中的相同位置。然后，当您想要重新启动动画时，只需删除该类，调用重置函数（从返回值中获取新插入的元素），然后再添加动画类以重新开始动画。 / p>

例如：

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/

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

Answer 3

您需要在动画完成后删除类

但直接使用removeClass无法使用，因为它不会让动画完整，而是使用setTimeout

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

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

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

Answer 4

对我来说，简单的解决方案是在添加类之前启动回流过程。你可以通过“改变”元素的宽度来做到这一点。我认为回流过程对于浏览器更快，然后重新插入节点。而且在编码方面更简单。在jQuery中：

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

Answer 5

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

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

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

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

Answer 6

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

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

在您的javascript中，.animation和.fadeInDown已添加到#button，之后您就拥有了这些课程，而您又无法再添加这些课程。

Answer 7

这适用于我，来自animate.css github：

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

Answer 8

要重置元素，我们必须让 css 重新计算，对吗？所以我所做的是隐藏然后显示元素。我所做的是removeClass()，然后是hide()，然后是show() 和addClass()< /p>

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

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

8 个答案: