css3 中transition监听事件

<div class="box1">

</div>
<div class="box2">

</div>
<p>
开始动画监听内可以触发其他的动画和业务事件<br />
结束监听最有用，如当动画执行完后需要隐藏none这个标签<br />
</p>

<script>
$(function(){
//transitoin 只支持transitoinend事件 
$(".box1").on('click',function(){
$(this).toggleClass('current')
}).on('transitionend',function(){
console.log('box1 end')
});

//animation 监听需要加上webkit默认的不支持
/*webkitAnimationStart：在开始动画时触发,如果有延迟会在延迟后
*webkitAnimationEnd：在结束动画时触发，如果是infinite 那么会一直无法触发，因为动画一直在动 
*webkitAnimationIteration:当动画重复时触发，当执行完一次后又开始了这时会触发，每一次执行都会触发
*/
$(".box2").on('click',function(){
$(this).toggleClass('current')
}).on('webkitAnimationStart',function(){
console.log('box2 start')
}).on('webkitAnimationEnd',function(){
console.log('box2 end')
}).on('webkitAnimationIteration',function(){
console.log('box2 interation')
})
})

</script>