css动画播放后jquery删除类？

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");
    }
);

如果要实现延迟,可以排队()类删除操作:

$("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

这对我有用.