Question

我有一组预定义的css类，使用它我可以为div设置动画。场景是我试图用“幻灯片放映”来设置div的动画。只需在div中添加'slide in'类就可以让div滑入。但问题是第二次这样做。在第二次，div将已经'滑入'类，所以我删除'幻灯片'类，我再次添加相同的类动画。但是动画并没有发生，但是当我在删除'slide in'类之后添加'slide in'类之前添加了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');
}

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

2 个答案: