jQuery的删除CSS动画下课玩？(jquery remove class after css a

我有CSS代码：

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

当进入该网站，只播放一次

但问题是，而做动画

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

我怎么能清除人体内的类“开始”动画完成后，

或删除类延迟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();
        });
    }
);

注： 在（）只因为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:

什么工作对我来说是总是在事件侦听器开始删除动画类，在两者之间运行一些小的代码，然后重新添加动画类和它的工作。 现在总是会触发动画。 在我来说，我希望有一个摆动的动画被触发，如果密码是错误的。 不知道你的推理。 我想去除，动画总是再次触发动画，即使他们多次点击提交，这是错误的。

$j('#submitLogin').on('click',function(){    
    if(true){
       //login
    }else{
       $j('.lockIcon').removeClass('wobble-hor-top');
       $j(this).prev().prev().addClass('invalid');
       $j('.loadIconKey').hide();
       $j('.lockIcon').addClass('wobble-hor-top');
    }
});

Answer 6:

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

文章来源: jquery remove class after css animation played?