ブラウザスニッフィングなしで移行をサポートするにはどうすればよいですか？

Question

CSSトランジションの原因となるスタイルの変更を引き起こすjavascriptがあります。

移行が完了した後に実行されるコールバックをどのようにフックする必要がありますか。明らかに古いブラウザでは即座に移行しますが、これらは移行イベントを認識しません。

（$ .browser.msie & & $ .browser.version < = 9）場合は、別のイベントを結合するこの短い行うための最善の方法は何ですか - 私は理解して悪い習慣ですが。

が ここ

が私のポイントを説明するための簡単な例です。

HTML

<div>test</div> 

CSS

div { 
    border: 1px solid black; 
    transition: width 2s; 
    width: 5px 
} 

.test { 
    width: 100px; 
} 

JS

$(function(){ 
    $(document).on('transitionend', function(){ 
     alert('transition complete'); 
    }); 
    $('div').addClass('test'); 
}); 

ライブJSフィドル：http://jsfiddle.net/vsDrH/1/

このイベントを古いブラウザで使用するには、どのような方法が最適ですか？

ありがとうございました。

Answer 1

CSSプロパティは、このようなブラウザでサポートされているかどうかを確認することができます：

http://jsfiddle.net/vsDrH/3/

function isSupported(property) { 
    return property in document.body.style; 
} 

$(function(){ 
    $(document).on('transitionend', function(){ 
     alert('transition complete'); 
    }); 
    $('div').addClass('test'); 

    if(!isSupported('transition')) { 
     $(document).trigger('transitionend'); 
    } 
}); 

Answer 2

あなたはjQuery Transitのソースコードを見てみることができます。それは非常によく書かれ、自己説明的です。

原理は単純であり：

1. あなたは、ブラウザのレンダリングエンジンのために盗聴するために、移行プロパティの名前を取得します。
2. 次は、私たちにはtransitionendプロパティが存在しない場合、あなたはsetTimeoutタイマーの実装を検討する必要があり、あなたがその特定のブラウザ以外の場合には
3. のイベントの名前を取得し、そこから異なるブラウザ間のすべてのイベント名、とのリストを持っています最適なクロスブラウザ効率を実現します。

Javascriptを（直接から：jQuery Transit Source Code）

// Helper function to get the proper vendor property name. 
// (`transition` => `WebkitTransition`) 

// (1) 

function getVendorPropertyName(prop) { 
    // Handle unprefixed versions (FF16+, for example) 
    if (prop in div.style) return prop; 

    var prefixes = ['Moz', 'Webkit', 'O', 'ms']; 
    var prop_ = prop.charAt(0).toUpperCase() + prop.substr(1); 

    if (prop in div.style) { return prop; } 

    for (var i=0; i<prefixes.length; ++i) { 
     var vendorProp = prefixes[i] + prop_; 
     if (vendorProp in div.style) { return vendorProp; } 
    } 
} 

// (2) 

var eventNames = { 
    'transition':  'transitionEnd', 
    'MozTransition': 'transitionend', 
    'OTransition':  'oTransitionEnd', 
    'WebkitTransition': 'webkitTransitionEnd', 
    'msTransition':  'MSTransitionEnd' 
}; 

var eventName = eventNames[getVendorPropertyName('transition')] || null 

// (3) 

if (eventName) { 
    // Use the 'transitionend' event if it's available. 
    bound = true; 
    element.bind(eventName, cb); 
} else { 
    // Fallback to timers if the 'transitionend' event isn't supported. 
    window.setTimeout(cb, delay); 
} 

あなたのtransitionEndイベントがこの文句を言わない仕事