如何在浏览器中规范化CSS3 Transition功能？

Question

Webkit的转换结束事件称为webkitTransitionEnd,Firefox是transitionEnd,opera是oTransitionEnd.在纯JS中处理所有这些问题的好方法是什么？我应该做浏览器嗅探吗？或分别实施每一个？还有其他一些方法没有发生在我身上？

即:

//doing browser sniffing
var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd";

element.addEventListener(transitionend, function(){
  //do whatever
},false);

要么

// Assigning an event listener per browser
element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);

function fn() {
   //do whatever
}

Answer 1

在Modernizr中使用了一种改进的技术:

function transitionEndEventName () {
    var i,
        undefined,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

    for (i in transitions) {
        if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
            return transitions[i];
        }
    }

    //TODO: throw 'TransitionEnd event is not supported in this browser'; 
}

然后,只要需要转换结束事件,您就可以调用此函数:

var transitionEnd = transitionEndEventName();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);

Answer 2

根据Matijs的评论,检测转换事件的最简单方法是使用库,在这种情况下为jquery:

$("div").bind("webkitTransitionEnd.done oTransitionEnd.done otransitionend.done transitionend.done msTransitionEnd.done", function(){
  // Unlisten called events by namespace,
  // to prevent multiple event calls. (See comment)
  // By the way, .done can be anything you like ;)
  $(this).off('.done')
});

在无库的javascript中它有点冗长:

element.addEventListener('webkitTransitionEnd', callfunction, false);
element.addEventListener('oTransitionEnd', callfunction, false);
element.addEventListener('transitionend', callfunction, false);
element.addEventListener('msTransitionEnd', callfunction, false);

function callfunction() {
   //do whatever
}

Answer 3

更新

以下是一种更简洁的方法,并不需要现代化

$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() {
 //do something
});

另外

var transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd otransitionend',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    }, transitionEnd = transEndEventNames[Modernizr.prefixed('transition')];

这是基于Modernizr建议的代码,但是对于较新版本的Opera有额外的事件.

http://modernizr.com/docs/#prefixed

Answer 4

如果使用jQuery,Bootstrap $.support.transition.end将返回当前浏览器的正确事件.

它在Bootstrap中定义并用于其动画回调,尽管jQuery文档说不依赖于这些属性:

虽然下面记录了其中一些属性,但它们不需要很长的弃用/删除周期,并且一旦内部jQuery代码不再需要它们就可以删除它们.

http://api.jquery.com/jQuery.support/

Answer 5

截至2015年,这个单行应该做的交易(IE 10 +,Chrome 1 +,Safari 3.2 +,FF 4+和Opera 12 +): -

var transEndEventName = ('WebkitTransition' in document.documentElement.style) ? 'webkitTransitionEnd' : 'transitionend'

附加事件监听器很简单: -

element.addEventListener(transEndEventName , theFunctionToInvoke);