Question

我有css代码：

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

进入网站时只播放一次

但问题是完成动画

我网站上的按钮不起作用

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

播放动画后

或删除课程延迟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

对我有用的是始终在事件侦听器的开头删除动画类，在它们之间运行一些小代码，然后再次添加动画类，然后它起作用了。现在它将始终触发动画。就我而言，如果密码错误，我希望触发摆动动画。不确定您的推理。我希望删除动画，以便动画总是能够再次触发，即使他们反复点击提交也没错。

Already up to date

Answer 6

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

css动画播放后jquery删除类？

6 个答案: