播放css动画后jquery删除类？答案

【问题标题】：jquery remove class after css animation played?播放css动画后jquery删除类？
【发布时间】：2019-02-08 12:35:50
【问题描述】：

我有css代码：

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

进入网站只播放一次

但问题是在动画完成时

我网站上的按钮不起作用

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

或者在动画播放后移除类延迟 x 秒？

【问题讨论】：

标签： jquery css html animation webkit

【解决方案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() 来代替上面的代码。

【讨论】：

@jkjk，你能详细说明这是怎么不工作的吗？处理程序是否在您的浏览器上运行？您是否将代码放在页面底部的ready 处理程序或<script> 元素中？
@zeno2k 使用 AnimationEnd 的答案不仅对我有用，而且在我看来更符合这个问题。 stackoverflow.com/a/15702258/810794
注：Most modern browsers now support the un-prefixed event

【解决方案2】：

试试

webkitAnimationEnd oanimationend msAnimationEnd animationend

而不是

transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd

这对我有用。

【讨论】：

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

【解决方案3】：

也许是另一种方式？

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

【讨论】：

这行得通，但理论上它更脆弱。如果您需要在之后立即删除该类（例如，如果您正在点击动画），这不如监听 animationEnd 事件。

【解决方案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 的浏览器。在生产环境中您应该考虑其他浏览器和强制提供无前缀的解决方案。

【讨论】：

【解决方案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');
    }
});

【讨论】：

【解决方案6】：

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

【讨论】：