使用 jquery 添加和删除类时的奇怪行为

Question

我有一组预定义的 css 类，使用它们我可以为 div 设置动画。场景是我正在尝试使用“幻灯片效果”为 div 设置动画。只需在 div 中添加 'slide in' 类，就会使 div 滑入。但是第二次这样做时问题就来了。第二次，div 已经有了“滑入”类，所以我要删除“滑入”类，并再次添加相同的类来制作动画。但是动画没有发生，但是当我在删除“滑入”类之后添加“滑入”类之前添加 10ms 延迟时，动画就会发生。

演示，仅适用于 webkit 浏览器

演示一，（不加延时，第二次动画不生效）

Demo1 尝试两次滑入按钮。

演示二，（添加延时，动画作品）

Demo2尝试滑入按钮两次。

我想知道，如何在不依赖时间延迟的情况下做到这一点

Answer 1

对于演示 1 - 将幻灯片功能替换为：

function slide(){
  $('#tg').addClass('slide in');
 var t= setTimeout(function(){$('#tg').removeClass('slide in');},600);
}

动画完成后我删除了这个类。演示：http://jsbin.com/eyerot/12/edit

对于自动滚动： 用这个替换你的js：

function slide(){
  interval = setInterval(function(){slide_me();},2000);
}

function slide_me(){
  $('#tg').addClass('slide in');
    t= setTimeout(function(){$('#tg').removeClass('slide in');},600);
}

Answer 2

最好的办法是将动画元素绑定到 CSS 动画完成时触发的 animationend 回调。

以下是我将如何重写您的 JS：

// Bind your element to animationend callbacks from all supporting browsers
$('#tg').bind('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function(event){
  // Each time this callback is called the "slide in" classes are removed.
  $('#tg').removeClass('slide in');
});

// Each time the button is clicked the classes are re-added
function slide() {
  $('#tg').addClass('slide in');
}