为什么用 jquery 删除 class 的速度不快？

Question

我在我的大部分网站中都使用 animate.css，因为它非常棒，但我经常遇到问题。

请看这个link -> http://quemfazsite.com.br/temp/teste8.php

如果要检查，请输入以下代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" type="text/css" />


</head>

<body>

<div onclick="$('#xxx').removeClass('flipInX').addClass('flipInX');" style="cursor:pointer;">CLICK TO ANIMATE IMMEDIATLY!</div>

<div onclick="$('#xxx').removeClass('flipInX'); window.setTimeout(function(){$('#xxx').addClass('flipInX')},100);" style="cursor:pointer;">CLICK TO ANIMATE WITH TIMEOUT!</div>

<div id="xxx" style="background:#FF0000; width:500px; height:500px;" class="animated flipInX"></div>

</body>
</html>

当页面加载时，我已经有一个带有 class "flipInX" 的元素。好的，如果您单击第一个按钮（页面顶部），我只需删除此 class 并再次添加。但是没有动画发生！我用这个：

$('#xxx').removeClass('flipInX').addClass('flipInX');

但是如果我使用第二个按钮（下面的代码），动画就会发生：

$('#xxx').removeClass('flipInX');
window.setTimeout(function(){$('#xxx').addClass('flipInX')},100);

jquery 有什么错误吗？我的意思是，看起来链接没有正常工作，如果 class 已经用 "removeClass" 删除，当 class 被添加回来时效果应该有效！这是怎么回事，我该如何解决？

编辑：

下面的代码也不起作用，所以不要浪费时间使用延迟，因为不幸的是它不会起作用:(

$('#xxx').removeClass('flipInX').delay(1000).addClass('flipInX');

Answer 1

动画有延迟执行，以毫秒为单位。

当您删除 class 并立即重新添加时，动画没有时间执行。 jQuery 不会 "wait" 让动画在 "remove" 和 "add" 之间执行。

需要 setTimeout() 才能让您在重新添加 class 之前看到移除 class 的动画...这就是您告诉 jQuery 中间等待。

并且 .delay() 在 jQuery 动画队列上工作...所以在两个 animate() 之间它会工作。在调用 CSS 动画的 addClass() 和 removeClass() 之间不起作用。

编辑

如果您想使用来自 CDN 的 CSS 动画，您别无选择 setTimeout()。
否则，您可以使用 @keyframe...
制作自己的 CSS 动画但是，如果您关心的是标记简化，则可以在点击处理程序中使用它。所以你只需要 class animated.

$(".animated").on("click",function(){
  $(this).removeClass("flipInX");
  var that=$(this);
  setTimeout(function(){
    that.addClass("flipInX");
  },100);
});

CodePen

Answer 2

延迟对addClass不起作用，第一个问题，建议使用setTimeout()或.queue()。

也许 .animate() 是您想要实现的目标的好方法

为什么用 jquery 删除 class 的速度不快？

Why removing class with jquery is not being done fast?

css

jquery

jquery-animate