[解決済み] ブラウザ間でCSS3の遷移終了イベントを正規化するには？

質問

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
}

どのように解決するのですか？

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