1

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

演示，仅在 webkit 浏览器中运行良好

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

Demo1尝试两次滑入按钮。

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

Demo2尝试两次滑入按钮。

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

4

2 回答 2

2

对于演示 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);
}
于 2012-10-23T10:23:37.300 回答
1

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

以下是我将如何重写您的 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');
}
于 2012-10-23T10:34:08.233 回答