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

Question

我有CSS代码:

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

进入网站后只播放一次

但是问题是动画完成的时候

我网站上的按钮不起作用

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

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

Answer 1

您可以绑定(bind)到 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()而不是让上面的代码工作。