Jak obsługiwać przejściówkę bez podsłuchiwania przeglądarki?

Question

Mam trochę javascript, który wyzwala niektóre zmiany stylu, które będą powodować przejścia CSS.

Jak powinienem podłączyć wywołanie zwrotne, które zostanie wykonane po zakończeniu przejścia. Oczywiście w starszych przeglądarkach nastąpi natychmiastowe przejście, ale te nie rozpoznają również zdarzenia przejścia.

Jaki jest najlepszy sposób, aby zrobić to krótkie wiązania różnych zdarzeń if ($ Browser.msie & & $ browser.version < = 9) - które, jak rozumiem jest złą praktyką.

Oto krótki przykład, aby zilustrować mój punkt widzenia:

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'); 
}); 

żywo JS skrzypce: http://jsfiddle.net/vsDrH/1/

Jaki jest najlepszy sposób, aby to wydarzenie działało w starych przeglądarkach?

Dzięki za pomoc.

Answer 1

Można sprawdzić, czy właściwość CSS jest obsługiwany w przeglądarce tak:

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

Można przyjrzeć kodu źródłowego jQuery Transit. Jest bardzo dobrze napisane i samo wyjaśniające.

Zasada jest prosta:

1. Otrzymasz nazwę właściwości przejściowym, wąchać dla silnika renderowania przeglądarki;
2. Następnie mamy listę wszystkich nazw zdarzeń w różnych przeglądarkach, z których można uzyskać nazwę wydarzenia dla tej konkretnej przeglądarce
3. W każdym innym przypadku, jeśli nie transitionend właściwość istnieje, należy rozważyć wdrożenie setTimeout timera , dla optymalnej wydajności w różnych przeglądarkach.

Javascript (bezpośrednio z: 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); 
} 

ten sposób można być w 100% pewien, że to wydarzenie transitionEnd zadziała