javascript - 在没有 jQuery 或 Modernizr 等框架的情况下检测对 transitionend 事件支持的简单方法？

Question

有没有人找到一种简单的方法来检测浏览器是否支持 vanillaJs 中的 transitionend 事件，尤其是在所有主流浏览器中都有效的方法？ :(

我在这里找到了这个未答复的线程:Test for transitionend event support in Firefox ，以及相当多的几乎可以工作的技巧。

现在我正在向所有 vendor 前缀批量添加事件监听器，并且它有点奏效(尽管我认为这是一种可怕的方法，每次看它都会伤害我的眼睛)。但是IE8和IE9根本不支持，所以我需要检测这两个，并分别对待。

我更愿意在没有浏览器嗅探的情况下执行此操作，并且绝对没有像 jQuery 这样的大型库/框架

我制作了一个 jsfiddler 片段来说明我的问题。有一个按钮可以生成一个对话框。当通过单击关闭删除对话框时，它会在顶部和不透明度中转换，并且在结束转换后它应该显示 = 无。但是如果 transitionend 永远不会被触发(就像在 IE8 和 IE9 中一样)，对话框永远不会被删除，使其覆盖显示对话框按钮，破坏用户体验。如果我可以检测到 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)

如果我没有很好地解释我的问题，请告诉我，我会努力做得更好! :)

Answer 1

从 bootstrap transition 复制而来，如果浏览器支持 transition，它不仅返回 true，还返回事件的专有名称

  function transitionEnd() {
    var el = document.createElement('div')//what the hack is bootstrap

    var transEndEventNames = {
      WebkitTransition : 'webkitTransitionEnd',
      MozTransition    : 'transitionend',
      OTransition      : 'oTransitionEnd otransitionend',
      transition       : 'transitionend'
    }

    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return transEndEventNames[name];
      }
    }

    return false // explicit for ie8 (  ._.)
  }

希望这对您有所帮助。

EID:我修改了一些默认的引导函数，所以它不返回对象而是返回字符串。