Wie unterstützt man Transitionend ohne Browser-Sniffing?

Question

Ich habe etwas Javascript, das einige Stiländerungen auslöst, die zu CSS-Übergängen führen.

Wie sollte ich einen Callback einbinden, der ausgeführt wird, nachdem der Übergang abgeschlossen ist. Offensichtlich wird es in älteren Browsern sofort übergehen, aber diese werden das Ereignis transitionend auch nicht erkennen.

Was ist der beste Weg, um diese kurze binden verschiedene Ereignisse zu tun if ($ Browser.msie & & $ browser.version < = 9) - was ich ist eine schlechte Praxis zu verstehen.

Hier ist ein kurzes Beispiel mein Punkt zu illustrieren:

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

Live-JS Geige: http://jsfiddle.net/vsDrH/1/

Wie kann dieses Ereignis in alten Browsern am besten funktionieren?

Danke für jede Hilfe.

Answer 1

können Sie überprüfen, ob die CSS-Eigenschaft im Browser wie folgt unterstützt:

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

Sie einen Blick auf den Quellcode jQuery Transit nehmen. Es ist sehr gut geschrieben und selbst erklärend.

Das Prinzip ist einfach:

1. Sie den Namen der Übergangs Eigenschaft zu erhalten, für das Rendering-Engine des Browsers zu schnuppern;
2. Als nächstes haben wir eine Liste mit allen Ereignisnamen in verschiedenen Browsern, von dem Ihnen den Namen des Ereignisses für den jeweiligen Browser
3. In jedem anderen Fall, wenn keine transitionend Eigenschaft vorhanden ist, sollten Sie ein setTimeout Timer Umsetzung bekommen betrachten , für optimale browserübergreifende Effizienz.

Javascript (direkt aus: 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); 
} 

dies tun Sie 100% sicher sein, dass Ihr transitionEnd Ereignis