1

我正在尝试学习如何将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);
4

1 回答 1

2

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 fiddle 可在此处获得。

于 2012-11-21T19:13:50.750 回答