If/Else Javascript 语句以在失败时禁用过渡动画

Question

我有一个带有汉堡菜单按钮的导航栏。在我添加 open/close javascript 动画之前，导航菜单适用于所有浏览器。在一些较旧的浏览器上，不幸的是，如果单击该脚本，将完全阻止菜单打开。但它适用于大多数较新的浏览器。如果脚本没有正确执行，我需要让脚本停止，让旧版浏览器能够打开导航栏。

我已经编写了一个简单的修复程序来阻止脚本在 "something" 为假时执行。

if (something == false) {
  <!--animation script goes here -->
stop
}

将 "something" 更改为不同的东西给了我有趣的结果。如果我把它改成

if (data == false) {
  <!--animation script goes here -->
stop
}

然后它会完全停止脚本，即使在运行动画完美之前的浏览器中也是如此。

我的问题是，如果运行没有成功，我可以用什么替换 "something" 来使脚本停止？

这是动画脚本，如果你需要的话。（别被它吓到，我只需要在动画失败时停止这个脚本即可。）

! function() {
"use strict";

function e() {
    var e, t = document.createElement("div"),
        n = {
            transition: "transitionend",
            OTransition: "otransitionend",
            MozTransition: "transitionend",
            WebkitTransition: "webkitTransitionEnd"
        };
    for (e in n)
        if (n.hasOwnProperty(e) && void 0 !== t.style[e]) return n[e];
    return !1
}

function t(e) {
    var t = {};
    e = e || window.event, t.evTarget = e.currentTarget || e.srcElement;
    var n = t.evTarget.getAttribute("data-target");
    return t.dataTarget = n ? document.querySelector(n) : !1, t
}

function n(e) {
    var t = e.style.height;
    e.style.height = "auto";
    var n = getComputedStyle(e).height;
    return e.style.height = t, e.offsetHeight, n
}

function a(e, t) {
    if (document.createEvent) {
        var n = document.createEvent("HTMLEvents");
        n.initEvent(t, !0, !1), e.dispatchEvent(n)
    } else e.fireEvent("on" + t)
}

function r(e, t) {
    e.classList.remove("collapse"), e.classList.add("collapsing"), t.classList.remove("collapsed"), t.setAttribute("aria-expanded", !0), e.style.height = n(e), u ? e.addEventListener(u, function() {
        s(e)
    }, !1) : s(e)
}

function i(e, t) {
    e.classList.remove("collapse"), e.classList.remove("in"), e.classList.add("collapsing"), t.classList.add("collapsed"), t.setAttribute("aria-expanded", !1), e.style.height = getComputedStyle(e).height, e.offsetHeight, e.style.height = "0px"
}

function s(e) {
    e.classList.remove("collapsing"), e.classList.add("collapse"), e.setAttribute("aria-expanded", !1), "0px" !== e.style.height && (e.classList.add("in"), e.style.height = "auto")
}

function o(e) {
    e.preventDefault();
    var n = t(e),
        a = n.dataTarget;
    return a.classList.contains("in") ? i(a, n.evTarget) : r(a, n.evTarget), !1
}

function l(e) {
    function n() {
        try {
            i.parentNode.removeChild(i), a(i, "closed.bs.alert")
        } catch (e) {
            window.console.error("Unable to remove alert")
        }
    }
    e.preventDefault();
    var r = t(e),
        i = r.dataTarget;
    if (!i) {
        var s = r.evTarget.parentNode;
        s.classList.contains("alert") ? i = s : s.parentNode.classList.contains("alert") && (i = s.parentNode)
    }
    return a(i, "close.bs.alert"), i.classList.remove("in"), u && i.classList.contains("fade") ? i.addEventListener(u, function() {
        n()
    }, !1) : n(), !1
}

function c(e) {
    e = e || window.event;
    var t = e.currentTarget || e.srcElement;
    return t.parentElement.classList.toggle("open"), !1
}

function d(e) {
    e = e || window.event;
    var t = e.currentTarget || e.srcElement;
    return t.parentElement.classList.remove("open"), e.relatedTarget && "dropdown" !== e.relatedTarget.getAttribute("data-toggle") && e.relatedTarget.click(), !1
}
for (var u = e(), g = document.querySelectorAll("[data-toggle=collapse]"), v = 0, f = g.length; f > v; v++) g[v].onclick = o;
for (var p = document.querySelectorAll("[data-dismiss=alert]"), h = 0, m = p.length; m > h; h++) p[h].onclick = l;
for (var L, T = document.querySelectorAll("[data-toggle=dropdown]"), y = 0, E = T.length; E > y; y++) L = T[y], L.setAttribute("tabindex", "0"), L.onclick = c, L.onblur = d}();

我在想有人可能会说 "if (transition == false) { stop }" 之类的东西或那样做的东西，那将是完美的。

Answer 1

步骤 1

让我们首先确定我们要如何调用我们的函数。我们将在这里保持简单；像下面这样的东西应该可以解决问题：

if ( supports('textShadow') ) {
   document.documentElement.className += ' textShadow';
}

这应该是最后的函数调用。当我们将 CSS 属性名称传递给 supports() 函数时，它会 return 一个布尔值。如果为真，我们会将 className 附加到 documentElement 或 <html>。然后，这将从我们的样式表中为我们提供一个新的 'class' 名称来挂钩。

步骤 2

接下来，我们将构造 supports() 函数。

var supports = (function() {

})();

为什么我们不让支持等同于标准功能？答案是因为我们首先要做一些准备工作，绝对没有理由在每次调用函数时一遍又一遍地重复这些任务。在这种情况下，最好使支持等于从自执行函数 return 编辑的任何内容。

步骤 3

为了测试浏览器是否支持特定的属性，我们需要创建一个dummy元素，用于测试。这个生成的元素实际上永远不会被插入到 DOM;将其视为测试假人！

var div = document.createElement('div');

您可能已经知道，在使用 CSS3 属性时，我们可以使用一些供应商前缀：

-moz
-webkit
-o
-ms
-khtml

我们的 JavaScript 将需要过滤这些前缀并测试它们。所以，让我们把它们放在一个数组中；我们称之为供应商。

var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' ');

使用 split() 函数从字符串创建数组固然是懒惰的，但它可以节省几秒钟！

因为我们将通过这个数组进行过滤，所以让我们做个好人，并缓存数组的长度。

var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length;

上面的准备工作本质上是静态的，不需要在我们每次调用 supports() 时都重复。这就是为什么我们只在页面加载时运行它一次。现在，让我们 return 实际分配给 supports 变量的函数。

return function(prop) {

};

闭包的美妙之处在于，即使 supports() 等于 returned 函数，它仍然可以访问 div、vendors 和len 个变量。

步骤 4

直接测试：如果传递的属性对div的样式属性可用，我们知道浏览器支持属性；所以 return true.

return function(prop) {
   if ( prop in div.style ) return true;
};

想想 text-shadow CSS3 属性。大多数现代浏览器都支持它，不需要供应商前缀。考虑到这一点，如果我们不需要，为什么要过滤所有前缀？这就是我们将此检查放在顶部的原因。

步骤 5

您可能习惯于输入 CSS3 属性个名称，例如：-moz-box-shadow。但是，如果在 Firebug 中查看样式对象，您会发现它拼写为 MozBoxShadow。因此，如果我们测试：

'mozboxShadow' in div.style // false

False 将被 returned。此值区分大小写。

区分大小写这意味着，如果用户将 boxShadow 传递给 supports() 函数，它将失败。让我们提前考虑一下，检查参数的第一个字母是否为小写。如果是，我们将为他们修复错误。

return function(prop) {
   if ( prop in div.style ) return true;

   prop = prop.replace(/^[a-z]/, function(val) {
      return val.toUpperCase();
   });

};

正则表达式来拯救！上面，我们正在检查字符串 (^) 的开头是否有单个小写字母。只有在找到一个的情况下，我们使用toUpperCase()函数将字母大写。

步骤 6

我们接下来需要过滤 vendors 数组，并测试是否存在匹配项。例如，如果传递了 box-shadow，我们应该测试 div 的样式属性是否包含以下任何一项：

MozBoxShadow
WebkitBoxShadow
MsBoxShadow
OBoxShadow
KhtmlBoxShadow

如果找到匹配项，我们可以 return true，因为浏览器确实提供了对框阴影的支持！

return function(prop) {
   if ( prop in div.style ) return true;

   prop = prop.replace(/^[a-z]/, function(val) {
      return val.toUpperCase();
   });

   while(len--) {
      if ( vendors[len] + prop in div.style ) {
            return true;       
      } 
   }  
};

虽然我们可以使用 for 语句来过滤数组，但在这种情况下没有真正的必要。

顺序不重要 while 语句输入速度更快，需要的字符更少有一个微小的性能改进不要被 vendors[len] + prop; 迷惑，只需将这些名称替换为它们的实际值即可：MozBoxShadow.

步骤 7

但是，如果这些值中的 none 匹配怎么办？在那种情况下，浏览器似乎不支持属性，在这种情况下我们应该 return false.

while(len--) {
   if ( vendors[len] + prop in div.style ) {
         return true;       
   } 
} 
return false;

我们的功能应该这样做！让我们测试一下，通过将 className 应用于 html 元素，如果浏览器支持，比如说 text-stroke 属性（只有 webkit 支持）。

if ( supports('textStroke') ) {
   document.documentElement.className += ' textStroke';
}

第 8 步：

用法有了我们现在可以挂钩的 class 名称，让我们在样式表中尝试一下。

/* fallback */
h1 {
   color: black;
}   

/* text-stroke support */
.textStroke h1 {
  color: white;
  -webkit-text-stroke: 2px black;
}

最终源代码

var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;

   return function(prop) {
      if ( prop in div.style ) return true;

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            // browser supports box-shadow. Do what you need.
            // Or use a bang (!) to test if the browser doesn't.
            return true;
         } 
      }
      return false;
   };
})();

if ( supports('textShadow') ) {
   document.documentElement.className += ' textShadow';
}

来源：copy pasted from here

要获得更全面的解决方案，请参阅 Modernizr 库。

If/Else Javascript 语句以在失败时禁用过渡动画

If/Else Javascript statement to disable transition animation if failed

html

javascript

animation

transition

if-statement