css动画播放后jquery删除类？

我有CSS代码：css动画播放后jquery删除类？

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

，当进入网站

，但问题是当动画完成

的按钮在我的网站是不是工作

只播放一次

如何在动画完成后删除机体类别“开始”

或删除类别延迟x秒后呃动画播放？

来源

2012-12-14 jk jk

您可以绑定到transitionend事件（对所有的人，实际上）：

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

如果你想实现一个延时，可以queue()清除类操作：

$("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()而不是上面的代码工作。

来源

2012-12-14 18:52:56

+1哇我不知道 –

@jkjk，你能详细说明这是不是工作？处理程序是否在浏览器上运行？您是否已将代码放置在“ready”处理程序或位于页面底部的“

另一种方式也许？

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

来源

2012-12-14 18:52:41

谢谢，它的作品 –

这个工程，但理论上它更脆弱。如果您需要立即删除该类（例如，如果您在点击时进行动画制作），这不如听动画结尾事件。 – Pirijan

下面是代码：

var div = document.querySelector('div'); 

function callback() { 
    div.classList.remove('start'); // or modify div.className 
} 

div.addEventListener("webkitAnimationEnd", callback, false);

入住这live example上jsbin。

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

来源

2012-12-14 18:58:56 dreame4

尝试

webkitAnimationEnd oanimationend msAnimationEnd animationend

，而不是

transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd

这为我工作。

来源

2013-03-29 11:24:32 zeno2k

这个答案更像是对已接受答案的评论。请解释如何使用这些属性，以便答案可以独立。 –

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

来源

2017-07-20 21:02:36

css动画播放后jquery删除类？

回答

相关问题