检测哪个CSS动画刚在JavaScript中结束? [英] Detect which CSS animation just ended in JavaScript?
问题描述
如何检测JavaScript中刚刚完成的CSS动画?
How can you detect which CSS animation just finished in JavaScript?
最终的需求是重新触发CSS动画.由于我们的HTML层次结构,我们宁愿不检查元素的类,而只在特定动画结束时才采取措施.如果您有一种方法可以允许在不删除/添加类的情况下重新触发动画,请告诉我们.
The ultimate need is to re-trigger a CSS animation. Due to our HTML hierarchy, we prefer not checking the element's class but instead taking action only when a particular animation ends. If you have a method that allows re-triggering an animation without removing/adding a class, please let us know.
否则...我们的代码:
Otherwise... our code:
page.find( '.button.letter' ).on( 'webkitAnimationEnd', function() {
$( this ).removeClass( 'tap_animation' );
console.log( 'Hi: ' + this.style.webkitAnimationName );
if ( !write_mode() ) {
do_write( this );
}
});
this.style.webkitAnimationName 始终返回空字符串.
我们在做错什么吗?
我们需要WebKit浏览器的代码,特别是Mobile Safari.
We need the code for WebKit browsers, specifically Mobile Safari.
谢谢!
推荐答案
在jQuery中,您可以访问originalEvent
对象,然后从该对象中访问animationName
属性:
From jQuery you can access the originalEvent
object, and, from there, the animationName
property:
$('body').on('webkitAnimationEnd', function(e){
var animName = e.originalEvent.animationName;
console.log(animName);
});
从那里开始,只需使用if
来检查/表示动画名称是什么(过去时,我想假设它已结束).
From there, simply use an if
to check what the animation name is/was (past-tense, I suppose, given that it ended).
以上内容进行了更新,可能会提供更好的说明:
The above updated, to give possibly a better illustration:
$('div').on('webkitAnimationEnd', function(e){
var animName = e.originalEvent.animationName;
if (animName == 'bgAnim') {
alert('the ' + animName + ' animation has finished');
}
});
此演示使用以下HTML:
This demo uses the following HTML:
<div><span>text</span></div>
和CSS:
@-webkit-keyframes bgAnim {
0%, 100% {
color: #000;
background-color: #f00;
}
50% {
color: #fff;
background-color: #0f0;
}
}
@-webkit-keyframes fontSize {
0%, 100% {
font-size: 100%;
}
50% {
font-size: 300%;
}
}
div {
font-weight: bold;
-webkit-animation: bgAnim;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 2;
}
span {
font-size: 100%;
font-weight: bold;
-webkit-animation: fontSize;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}
这篇关于检测哪个CSS动画刚在JavaScript中结束?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!