jQuery的删除CSS动画下课玩过吗？ [英] jquery remove class after css animation played?

问题描述

我的CSS code：

I have the css code:

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

当进入该网站

和只播放一次。

and just play once when entered the website

，但问题是，而动画完成

but the problem is while the animation done

在我的网站上的按钮不工作

the buttons in my site isn't works

我怎么能清除人体内的类开始动画完成后

how can I remove the body class "start" after animation done

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

or remove class delay x seconds after animation played?

推荐答案

您可以绑定到<一个href=\"https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions?redirectlocale=en-US&redirectslug=CSS/CSS_transitions#Detecting_the_completion_of_a_transition\">transitionend事件（所有这些，实际上）：

You can bind to the transitionend event (to all of them, actually):

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
    function() {
        $(this).removeClass("start");
    }
);

如果你想实现一个延时，可以队列（）清除类操作：

If you want to implement a delay, you can queue() the class removal operation:

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
    function() {
        $(this).delay(1000).queue(function() {  // Wait for 1 second.
            $(this).removeClass("start").dequeue();
        });
    }
);

的注：的上（）只存在，因为jQuery的1.7，如果你使用的是老释放你将不得不使用 bind（）的，而不是为code以上的工作。

Note: on() only exists since jQuery 1.7, if you are using an older release you will have to use bind() instead for the code above to work.

这篇关于jQuery的删除CSS动画下课玩过吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！