7

それぞれ (ある程度の) 持続時間でアニメーション化する複数の要素があります。jQuery ライブラリとDavid Walshtransitionendのヘルパー関数を使用して、CSS3 トランジションを使用してアニメーション化しています。

私の問題は、transitionEndイベントが発生していないことです! (Chrome & Firefox)

私のコード:

var $children = $container.find('.slideblock').children();

if(Modernizr.csstransitions && Modernizr.csstransforms3d) {

    if($.browser.webkit === true) {
        $children.css('-webkit-transform-style','preserve-3d')
    }

    $children.each(function(i){
        $(this).on(whichTransitionEvent,function () {
            $(this).remove();
        });
        $(this).show().css('animation','slideOutToRight ' + ((Math.random() / 2) + .5) + 's');
    });

}

アップデート

変数はwhichTransitionEvent、イベント名を含む文字列を返す自己実行関数を指します。

var whichTransitionEvent = (function (){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition'       :'transitionEnd',
      'OTransition'      :'oTransitionEnd',
      'MSTransition'     :'msTransitionEnd',
      'MozTransition'    :'transitionend',
      'WebkitTransition' :'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
} ());

console.log(whichTransitionEvent);        // returns "webkitTransitionEvent" in Chrome
console.log(typeof whichTransitionEvent); // returns "string"
4

3 に答える 3

8

Chrome 29 と Firefox 23 でこれを複製しようとすると、元の関数は同じように失敗しました。つまり、両方でconsole.log(whichTransitionEvent)返さ'transitionEnd'れます。

ハッシュ内の要素の順序をtransitions変更すると問題が修正され、接頭辞が付いていない標準プロパティと独自の接頭辞が付いた標準プロパティの両方があることが示唆されます。

以下のリファクタリングされた関数。これにより、正しいイベントが発生します。

function whichTransitionEvent(){
  var t;
  var el = document.createElement('fakeelement');
  var transitions = {
    'WebkitTransition' :'webkitTransitionEnd',
    'MozTransition'    :'transitionend',
    'MSTransition'     :'msTransitionEnd',
    'OTransition'      :'oTransitionEnd',
    'transition'       :'transitionEnd'
  }

  for(t in transitions){
    if( el.style[t] !== undefined ){
      return transitions[t];
    }
  }
}

これが役立つかどうか教えてください

于 2013-09-07T11:50:37.150 に答える
-1

文字列の代わりに関数を渡しているので、...と同等のことをしています。

$(this).on(function(){...}, function() {...})

これを修正するには、スクリプトの先頭に文字列を設定して、何度も呼び出されないようにすることをお勧めします。

if(Modernizr.csstransitions && Modernizr.csstransforms3d) {
    var transitionEnd = whichTransitionEvent();
    if($.browser.webkit === true) {
        $children.css('-webkit-transform-style','preserve-3d')
    }

    $children.each(function(i){
        $(this).on(transitionEnd,function () {
            $(this).remove();
        });
        $(this).show().css('animation','slideOutToRight ' + ((Math.random() / 2) + .5) + 's');
    });

}
于 2012-09-03T18:27:18.477 に答える