javascript - CSS TransitionEnd 未触发

Question

我为 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

Answer 1

问题是您根本没有使用 transition 属性，而是使用了关键帧动画。你需要 animationend:

$("#block").one('webkitAnimationEnd msAnimationEnd animationend', function(e) {
    alert("block has finished moving");
});
$("#block").addClass("tweetanimation");

DemoFiddle 和 More Info Link