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

Question

我有一些 javascript 会触发一些样式更改，从而导致 CSS 转换。

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

如果 ($.browser.msie && $.browser.version <= 9) 绑定(bind)不同的事件，最好的方法是什么 - 我理解这是不好的做法。

这里有一个简单的例子来说明我的观点:

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