cqu动画播放后jquery删除类？

我有css代码：

body.start{-webkit-animation:srcb ease-in .4s 1;} 

进入网站时只玩一次

但问题是动画完成的时候

我网站上的按钮不起作用

如何在完成动画后删除body类“start”

或者在播放动画后删除课程延迟x秒？

Answer 1

您可以绑定到transitionend事件（实际上是所有这些事件）：

 $("body").on( "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function() { $(this).removeClass("start"); } ); 

如果要实现延迟，可以对类（）队列删除操作进行排队 ：

 $("body").on( "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function() { $(this).delay(1000).queue(function() { // Wait for 1 second. $(this).removeClass("start").dequeue(); }); } ); 

注意： on（）仅在jQuery 1.7之后存在，如果您使用的是旧版本，则必须使用bind（）代替上面的代码才能工作。

Answer 2

尝试

 webkitAnimationEnd oanimationend msAnimationEnd animationend 

代替

 transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd 

这对我有用。

Answer 3

另一种方式呢？

 $(window).load(function(){ setTimeout(function(){ $('body.start').removeClass('start') }, 4000); }); 

Answer 4

这是代码：

 var div = document.querySelector('div'); function callback() { div.classList.remove('start'); // or modify div.className } div.addEventListener("webkitAnimationEnd", callback, false); 

在jsbin上查看此实例 。

请注意，您的动画和我的解决方案仅适用于基于webkit的浏览器。 在生产环境中，您应该考虑其他浏览器并强制提供无前缀的解决方案。

Answer 5

 $("#mydiv").removeClass("start", function() { alert("do something"); });