Question

嘿伙计们，我在transition.js中看到了以下功能

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] }
      }
    }

现在我理解了函数的大部分内容，但是一旦我看到for循环，我就会有一点困惑。我明白了，for in循环，我不明白的想法是if条件，我看到它检查el.style[name]是NOT EQUAL TO undifined，但我的问题是在哪里el.style[name]不等于undefined？我只想了解以下内容：

if (el.style[name] !== undefined) {

我了解正在检查的内容。但我不明白它正在检查哪里。

我知道我错过了一些非常简单的事情。但是我已经有一段时间了，但仍然无法理解这一行。

该行也可以在git Line 27上找到。

谢谢。

Answer 1

它正在做的是找出要使用的受支持的transition end事件名称。

它是如何做到的？通过查看支持的transition css属性名称。如您所知，所有elements都有style property。如果查看元素的样式对象，可以发现所有支持的样式名称都以''（空字符串）作为其值列出。

所以这里transEndEventNames包含4 transition css键的名称，我们正在检查支持哪一个，如果支持其中任何一个键，那么style对象将有一个空字符串作为其值，如果不支持css属性，那么样式对象中将不会出现该字符串，因此style[name]将返回undefined

了解transition.js复杂功能检查。

1 个答案: