javascript - css transition-end 没有事件被触发

Question

如果关键帧动画结束，我会尝试获取一个事件，但我没有让它工作。

也许有人可以看看并告诉我我做错了什么，我用jQuery“on”和addListener试过了......

我在 codepen http://codepen.io/destroy90210/pen/faeAh上放了一个例子， 我用 chrome v25 测试它

$(".addView").on("click", function(){
  $(".content").append("<div id='col' class='column'>view</div>");
  //this doesn´t work
  var elm = document.getElementById("col"); 
  elm.addEventListener('webkitTransitionEnd', function( event ) { 
    alert( "Finished transition!" ); 
    }, false );
  //or this
  console.log($(".column"));
  $(".column").on('webkitTransitionEnd', function () {
    alert( "Finished transition! 2" ); 
  });
});

//or this :(
$(".content").on('webkitTransitionEnd', '.column', function () {
  alert( "Finished transition! 3" ); 
});

css

.column{
  width: 25%;
  float: left;
  background-color: #00ff00;
  height:100%;
  color:white;
  text-align:center;
  font-size:3em;
  font-weight:300;
  -webkit-transform-origin: 0% 50%;
-webkit-animation: rotateInFromRight 1s cubic-bezier(.70, 0, .40, 1) 1 normal forwards;
}

@-webkit-keyframes rotateInFromRight{
  0% { -webkit-transform:rotateY(90deg);opacity:0}
  50%{ opacity:1}
  100%{ -webkit-transform: rotateY(0deg); opacity:1}
}

html

<div class="sidebar">
  <button class="addView">add View</button>
</div>
<div class="content"></div>

Answer 1

由于您正在创建将动态设置动画的元素，因此您需要像这样将处理程序附加到该元素。

$(".addView").on("click", function(){
  var elm = $("<div id='col' class='column'>view</div>");
  elm.eq(0).bind('webkitAnimationEnd', function() {
    alert('Finished transition');
  });
  $(".content").append(elm);
});

更新了笔。