5

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

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

如果 ($.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/

使此事件在旧浏览器中运行的最佳方法是什么？

谢谢你的帮助。

4

2 回答 2

5

您可以检查浏览器是否支持 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');
    }
});
于 2013-05-08T11:21:08.130 回答
3

您可以查看jQuery Transit的源代码。这是非常好的书面和不言自明的。

原理很简单：

  1. 获取过渡属性的名称，以嗅探浏览器的渲染引擎；
  2. 接下来，我们有一个包含不同浏览器的所有事件名称的列表，您可以从中获取该特定浏览器的事件名称
  3. 在任何其他情况下，如果不transitionend存在任何属性，您应该考虑实现一个setTimeout计时器，以获得最佳的跨浏览器效率。

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

这样做你将 100% 确定你的transitionEnd事件会触发

于 2013-05-08T11:24:37.630 回答