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

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

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

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

Fiddle：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;
}

一个更安全的方法是使用类似的动画结束事件

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

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

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

例如：

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/

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

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

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

动画完成后需要移除类，

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

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

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

问题是它会立即移除类，然后添加类，所以我只添加了一个带有button2id的新div，点击它只移除类，再点击它将动画化的按钮div。

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

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

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

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

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

在您的javascript中，类.animation和.fadeInDown被添加到#button中，之后您就有了这些类，不能再添加了。

这对我来说很有效，来自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，对吗？所以我所做的就是隐藏然后展示元素。我所做的是removeClass（），然后hide

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

相关内容

最新更新

热门标签：