如何检测刚刚在JavaScript中完成的CSS动画？
最终需要是重新触发CSS动画.由于我们的HTML层次结构,我们不希望检查元素的类,而是仅在特定动画结束时才采取操作.如果您的方法允许在不删除/添加课程的情况下重新触发动画,请告诉我们.
否则…我们的代码：
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.
谢谢！
最佳答案
从jQuery中,您可以访问originalEvent对象,并从那里访问animationName属性：
$('body').on('webkitAnimationEnd',function(e){
var animName = e.originalEvent.animationName;
console.log(animName);
});
从那里,只需使用if来检查动画名称是什么(过去时,我想,鉴于它已经结束).
以上更新,可能提供更好的说明：
$('div').on('webkitAnimationEnd',function(e){
var animName = e.originalEvent.animationName;
if (animName == 'bgAnim') {
alert('the ' + animName + ' animation has finished');
}
});
此演示使用以下HTML：
和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;
}
