播放 css 动画后 jquery 删除类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13884563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery remove class after css animation played?
提问by jk jk
I have the css code:
我有 css 代码：
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
动画完成后如何删除主体类“开始”
or remove class delay x seconds after animation played?
或在动画播放后删除类延迟 x 秒？
回答by Frédéric Hamidi
You can bind to the transitionendevent (to all of them, actually):
您可以绑定到transitionend事件（实际上是所有事件）：
$("body").on(
"transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
function() {
$(this).removeClass("start");
}
);
If you want to implement a delay, you can queue()the class removal operation:
如果要实现延迟，可以queue()类移除操作：
$("body").on(
"transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
function() {
$(this).delay(1000).queue(function() { // Wait for 1 second.
$(this).removeClass("start").dequeue();
});
}
);
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.
回答by zeno2k
Try
尝试
webkitAnimationEnd oanimationend msAnimationEnd animationend
instead of
代替
transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd
This worked for me.
这对我有用。
回答by Atif Mohammed Ameenuddin
Another way perhaps?
也许是另一种方式？
$(window).load(function(){
setTimeout(function(){
$('body.start').removeClass('start')
}, 4000);
});
回答by dreame4
Here is the code:
这是代码：
var div = document.querySelector('div');
function callback() {
div.classList.remove('start'); // or modify div.className
}
div.addEventListener("webkitAnimationEnd", callback, false);
Check this live exampleon jsbin.
在 jsbin 上查看此实时示例。
Please notice, that your animation and my solution work only in webkit-based browsers. In production environment you should take into consideration other browsers andmandatory provide prefix-free solution.
请注意，您的动画和我的解决方案仅适用于基于 webkit 的浏览器。在生产环境中，您应该考虑其他浏览器并强制提供无前缀的解决方案。
回答by Kenneth Kimbrell
What worked for me was to always remove the animation class at the start of the event listener, run some small code in-between and then add the animation class again and it worked. It will now always trigger the animation. In my case I wanted a wobble animation to be triggered if the password was wrong. Not sure of your reasoning. I wanted the animation removed so the animation would always trigger again, even if they repeatedly hit submit and it was wrong.
对我有用的是始终在事件侦听器开始时删除动画类，在中间运行一些小代码，然后再次添加动画类并且它起作用了。它现在将始终触发动画。就我而言，如果密码错误，我希望触发摆动动画。不确定你的推理。我希望删除动画，这样动画总是会再次触发，即使他们反复点击提交并且这是错误的。
$j('#submitLogin').on('click',function(){
if(true){
//login
}else{
$j('.lockIcon').removeClass('wobble-hor-top');
$j(this).prev().prev().addClass('invalid');
$j('.loadIconKey').hide();
$j('.lockIcon').addClass('wobble-hor-top');
}
});
回答by TV-C-15
$("#mydiv").removeClass("start",
function() {
alert("do something");
});
