javascript - 理解transition.js bootstrap中的代码

Question

我在transition.js中看到了下面的代码，这是 Bootstrap 的一部分:

  function transitionEnd() {
    var el = document.createElement('bootstrap')

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

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

我明白这是如何工作的，我什至在 Mozilla 中测试了它，我在控制台中得到的结果如下:

Object { end: "transitionend" }

我相信在不同的浏览器中结果会有所不同。有人可以告诉我条件 if (el.style[name] !== undefined) 何时通过或失败吗？

还有为什么最后返回 false，它说仅适用于 I.E 8，但有人可以告诉我为什么吗？

Answer 1

该函数正在检查 transEndEventNames 中列出的每个样式属性是否存在于当前浏览器中，并在找到第一个匹配项时返回。

基于 WebKit 的浏览器(Chrome、Safari 等)将返回集合中的第一项:webkitTransitionEnd。

列表中的前 3 项是 vendor 特定的 CSS 属性。其中包括 Webkit、Mozilla 和 Opera。列表中的最后一项是 W3C 定义的 CSS 标准属性名称。

IE8 将返回 false，因为它不支持测试对象中列出的任何 CSS 属性。

我相信他们特别提到 IE8，因为其他浏览器会将函数的不返回视为 undefined，这是一个错误值(如果您对 undefined 进行 bool 检查)它的处理方式与值 false 类似)。因此，显式 return false 适用于在未指定返回值时不返回 false 值的浏览器。