javascript - jQuery や Modernizr などのフレームワークなしで transitionend イベントのサポートを検出する簡単な方法は?

Question

特にすべての主要なブラウザで実際に機能する方法で、ブラウザが transitionend イベントをvanillaJsでサポートしているかどうかを検出する簡単な方法を見つけた人はいますか? :(

私はここでこの未回答のスレッドを見つけました: Test for transitionend event support in Firefox、およびかなり多くのほとんど機能するハック。

現在、すべてのベンダープレフィックスにイベントリスナーを一括で追加していますが、うまくいきます (見るたびに目を痛める恐ろしいアプローチだとは思いますが)。しかし、IE8 と IE9 ではまったくサポートされていないため、これら 2 つを検出して、別々に処理する必要があります。

私はこれをブラウザのスニッフィングなしで、そして間違いなくjQueryのような巨大なライブラリ/フレームワークなしで行うことを好みます

私の問題を説明する jsfiddler スニペットを作成しました。ダイアログを表示するボタンがあります。閉じるをクリックしてダイアログを削除すると、上部と不透明度で遷移し、遷移が終了した後は display=none になるはずです。ただし、transitionend が起動されない場合 (IE8 や IE9 のように)、ダイアログは削除されず、[ダイアログの表示] ボタンを覆い隠し、UX を破壊します。transitionend が機能していないことを検出できれば、それらのブラウザーを閉じるときに display=none を設定するだけで済みます。

http://jsfiddle.net/QJwzF/22/

window.listenersSet = false;
window.dialogShouldBeVisible = false;

window.showMyDialog = function () {
    var myDialog = document.getElementById('dialog'),
        myClose = document.getElementById('close');
    if (!listenersSet) {
        if (!window.addEventListener) { // IE8 has no addEventListener
            myclose.attachEvent('onclick', function () {
                hideMyDialog();
            });
        } else {
            myClose.addEventListener('click', function () {
                hideMyDialog()
            });

            ['webkitTransitionEnd','oTransitionEnd', 'otransitionend', 'transitionend'].forEach(function (eventName) {
                myDialog.addEventListener(eventName, function (e) {
                    if (e.target === myDialog && e.propertyName === 'top') { // only do trigger if it is the top transition of the modalDialog that has ended
                        if (!dialogShouldBeVisible) {
                            myDialog.style.display = 'none';
                            e.stopPropagation();
                        }
                    }
                });
            });
        }
        listenersSet = true;
    }

    myDialog.style.display = 'block';
    myDialog.style.top = '15px';
    myDialog.style.opacity = '1';
    dialogShouldBeVisible = true;
}

window.hideMyDialog = function () {
    var myDialog = document.getElementById('dialog'),
        myClose = document.getElementById('close');
    myDialog.style.top = '-5%';
    myDialog.style.opacity = '0.1';
    dialogShouldBeVisible = false;
}

Opera、Firefox、Chrome、IE10 では動作しますが、IE8 と IE9 では動作しません (afaik)

問題をうまく説明できなかった場合は、お知らせください。:)