0

CSS3 を使用してセクションのインとアウトをアニメーション化する小さなアプリがあります。.is-activeある時点で要素から削除.is-activeして削除する必要があるため、z-index をすばやく更新する必要があるため、要素に再度追加する必要がありますが、これを.resulting-page行うtransitionendと関数.is-active内のコードを 2 回トリガーします。transitionend誰かがこれを修正する方法についてアドバイスできるかどうか疑問に思っていましたか?

JS

$('.resulting-page').removeClass('is-active').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function () {              
      $('.search-page').removeClass('tier3-override');
      $(this).addClass('is-active');
      console.log('this ran');  
});

JS フィドル http://jsfiddle.net/kyllle/aagTH/16/

4

1 に答える 1

0

Modernizr を使用して、ブラウザー固有のトランジションを取得できます。両方が適用されている場合、Chrome は transitionend と webkitTransitionEnd でトリガーされます。

var transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',  // Saf 6, Android Browser
        'MozTransition': 'transitionend',           // only for FF < 15
        'transition': 'transitionend'               // IE10, Opera, Chrome, FF 15+, Saf 7+
    },
    transEndEventName = transEndEventNames[Modernizr.prefixed('transition')];

return transEndEventName;
于 2014-10-31T07:56:23.750 に答える