javascript - 最终CSS3转换完成后，是否正确使用transitionend才能运行脚本？

我正在尝试学习如何将Transitionend与CSS3过渡配合使用，因此我拥有一组图像，这些图像的尺寸被设置为网格，并且不透明度从0变为1，理想情况下，我要做的就是等到所有这些图像已经结束，最后的transitionend事件已经触发，然后继续执行我的下一个代码。目前，我只是在尝试退出transitionend时注销一条消息，但是我什么也没收到，这意味着我可能使用了错误的消息。谁能建议我该怎么做？

JS小提琴：http://jsfiddle.net/mWE9W/2/

的CSS

.image img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.01;
  -webkit-transition: all 1s ease-in;
  -webkit-transform: scale(0);
  height: 150px;
  width: 150px;
  display:block;
}

.inner.active .image img {
  -webkit-transform: scale(1);
  top: 0;
  left: 0;
  opacity: 1;
}

JS

$('.image img').on('webkitTransitionEnd', function(e) {
  console.log('this ran')

  $('h2').fadeIn();
}, false);

最佳答案

1）您不需要在false方法调用中使用最后一个参数.on。因此，您的回调从未调用过。

2）一旦删除了不需要的参数，您会注意到回调实际上被调用了16次。发生这种情况是因为您有4个具有4个过渡比例的图像。对每个属性进行动画处理会导致调用回调。因此，您需要进行某种检查以确保图像转换已完成，并且仅在完成所有转换后才调用.fadeIn()方法。该代码将如下所示：

var imageCount = $('.image img').length, animatedCount = 0, animCompleteImages = $();
$('img').imagesLoaded(function() {
    $('.inner').addClass('active').on('webkitTransitionEnd', 'img', function(e) {
        if(!animCompleteImages.filter(this).length) {
            animCompleteImages = animCompleteImages.add(this);
            animatedCount++;

            if(animatedCount === imageCount) {
                $('h2').fadeIn();
            }
        }
    });
});​

可用的JS小提琴可用here。