1

CSS3トランジションでtransitionendがどのように使用されるかを学ぼうとしているので、グリッドにサイズ変更された一連の画像と、不透明度が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フィドルはここで入手できます。

于 2012-11-21T19:13:50.750 に答える