如何在没有浏览器嗅探的情况下支持transitionend

Question

我有一些javascript触发一些样式更改，将导致CSS过渡。

我应该如何钩入一个将在转换完成后执行的回调。显然，在旧的浏览器中，它会立即转换，但它们也无法识别transitionend事件。

除了绑定不同的事件之外，最好的方法是什么?msie,,.browser美元。版本<= 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');
});

Live JS fiddle: 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. 接下来我们有一个不同浏览器中所有事件名称的列表，从中你可以得到特定浏览器的事件名称
3. 在其他情况下，如果不存在transitionend属性，您应该考虑实现setTimeout定时器，以获得最佳的跨浏览器效率。

Javascript(直接来自:jQuery Transit源代码)

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

这样做，您将100%确定您的transitionEnd事件将触发