jQuery的删除CSS动画下课玩？

Question

我有CSS代码：

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

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

但问题是，而做动画

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

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

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

Answer 1

您可以绑定到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()对于上面的代码工作。

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此live example。

请注意，您的动画和我的解决方案基于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");
    });