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

Question

我有CSS代码：

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

进入网站后只播放一次

但问题是动画完成时

我网站上的按钮不起作用

动画完成后如何删除主体类“开始”

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

原文由 jk jk 发布，翻译遵循 CC BY-SA 4.0 许可协议

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() 来代替上面的代码才能工作。

原文由 Frédéric Hamidi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试

webkitAnimationEnd oanimationend msAnimationEnd animationend

代替

transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd

这对我有用。

原文由 zeno2k 发布，翻译遵循 CC BY-SA 3.0 许可协议