如何在没有浏览器嗅探的情况下支持过渡端?

I have some javascript that triggers some style changes that will result in CSS transitions.

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

How should I hook in a callback that will execute after the transition is complete. Obviously in older browsers it will transition instantly but these will not recognize the transitionend event either.

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

What is the best way to do this short of binding different events if ($.browser.msie && $.browser.version <= 9) - which I understand is bad practice.

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

Here is a quick example to illustrate my point:

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

HTML

<div>test</div>

CSS

div {
    border: 1px solid black;
    transition: width 2s;
    width: 5px
}

.test {
    width: 100px;
}

$(function(){
    $(document).on('transitionend', function(){
        alert('transition complete');
    });
    $('div').addClass('test');
});

Live JS fiddle: http://jsfiddle.net/vsDrH/1/

住JS小提琴:http://jsfiddle.net/vsDrH/1/

What is the best way to make this event work in old browsers?

在旧的浏览器中，使这个事件工作的最佳方式是什么?

Thanks for any help.

感谢任何帮助。

2 个解决方案

#1

You can check if the CSS property is supported in the browser like this:

您可以检查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');
    }
});

#2

You can take a look at the source code of jQuery Transit. It is very good written and self-explainatory.

您可以查看jQuery传输的源代码。这是一篇很好的文字和自我解释。

The principle there is simple :

这里的原则很简单:

You get the name of the transition property, to sniff for the rendering engine of the browser;
获取转换属性的名称，以嗅探浏览器的呈现引擎;
Next we have a list with all event names across different browsers, from which you get the name of the event for that specific browser
接下来，我们有一个列表，其中包含跨不同浏览器的所有事件名称，从中您可以获得该特定浏览器的事件名称
In any other case, if no transitionend property exists, you should consider implementing a setTimeout timer, for optimal cross-browser efficiency.
在任何其他情况下，如果不存在transitionend属性，您应该考虑实现一个setTimeout计时器，以获得最佳的跨浏览器效率。

Javascript ( directly from : jQuery Transit Source Code )

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

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

Doing this you will be 100% sure that your transitionEnd event will fire

这样做，您将100%确定您的transitionEnd事件将启动

#1