如果关键帧动画结束,我会尝试获取一个事件,但我没有让它工作。
也许有人可以看看,可以告诉我我做错了什么,我尝试使用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>
答案 0 :(得分:0)
由于您正在创建动态动画的元素,因此您需要将处理程序附加到那个元素。
$(".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);
});