我为 CSS 关键帧动画创建了一个非常基本的测试，包括“ontransitionend”的事件监听器 - 但无论我使用什么变体，这个“过渡结束”监听器都不会触发。 (我的完整代码包含所有 vendor 前缀)。
HTML
<div id="block">I like to move it</div>
CSS
.tweetanimation {
-webkit-animation: Tweet_FadeInOut 6s 1 forwards;
}
@-webkit-keyframes Tweet_FadeInOut {
0% {
opacity:0;
left:30%;
}
30%, 70% {
opacity:1;
left:15%;
}
100% {
opacity: 0;
left:0%;
}
}
JavaScript
$("#block").one('webkitTransitionEnd msTransitionEnd transitionend', function(e) {
alert("block has finished moving");
});
$("#block").addClass("tweetanimation");
出于某种原因，我无法让它工作!我错过了什么？ JSFiddle here
最佳答案
问题是您根本没有使用 transition 属性，而是使用了关键帧动画。你需要 animationend:
$("#block").one('webkitAnimationEnd msAnimationEnd animationend', function(e) {
alert("block has finished moving");
});
$("#block").addClass("tweetanimation");
DemoFiddle 和 More Info Link
关于javascript - CSS TransitionEnd 未触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28700431/