jquery - 播放css动画后jquery删除类？

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 上查看这个实时示例。

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