css transition-end 没有事件被触发答案

【问题标题】：css transition-end no event get firedcss transition-end 没有事件被触发
【发布时间】：2013-03-05 18:44:21
【问题描述】：

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

也许有人可以看看并告诉我我做错了什么，我用 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>

【问题讨论】：

标签： javascript events css-transitions

【解决方案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);
});

Updated pen.

【讨论】：

感谢它为我工作；）不知道如果它是动态创建的，我必须使用绑定。