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)通过或失败时，有人能告诉我吗？

为什么return false到底为什么，它仅适用于I.E 8，但有人可以告诉我为什么？

Answer 1

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

基于WebKit的浏览器（Chrome，Safari等）将返回集合中的第一项：webkitTransitionEnd。

列表中的前3项是供应商特定的CSS属性。那些是Webkit，Mozilla和Opera。列表中的最后一项是W3C定义的CSS标准属性名称。

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

我相信他们特别提到了IE8，因为其他浏览器会将函数的非返回视为undefined，这是一个假值（如果对undefined进行布尔检查，它将被视为类似于值false）。因此，显式return false将适用于未指定返回值时未返回falsey值的浏览器。

理解transition.js bootstrap中的代码

1 个答案: