如果/否則Javascript語句禁用過渡動畫失敗

Question

我有一個導航欄，有一個漢堡菜單按鈕。在添加打開/關閉JavaScript動畫之前，導航菜單適用於所有瀏覽器。在幾個較老的瀏覽器上，如果點擊該腳本，則不幸的是，該腳本將不能阻止菜單打開。但它適用於大多數較新的瀏覽器。如果腳本不能正確執行以讓舊瀏覽器能夠打開導航欄，我需要停止腳本。

我已經編寫了一個簡單的修復程序來停止腳本執行，如果「某事」是錯誤的。

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

將「某物」改變爲不同的東西給了我有趣的結果。如果我將其更改爲

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

然後，即使在之前完美運行動畫的瀏覽器中，它也會完全停止腳本。

我的問題是，如果腳本沒有成功運行，我可以用什麼替換「某事」以使腳本停止？

這裏是動畫腳本，如果你需要的話。 （不要讓它嚇到你了。我需要的是，如果動畫無法停止此腳本。）

! 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}(); 

我想有人可能能夠只是說類似「如果（過渡==假） {停止}「或者那樣做，那將是完美的。

Answer 1

步驟1

首先，讓我們確定我們要如何調用我們的功能。我們在這裏保持簡單;像下面的應該做的伎倆：

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

這應該是最後的函數調用。當我們將一個CSS屬性名稱傳遞給supports()函數時，它將返回一個布爾值。如果屬實，我們會將類名附加到documentElement或<html>。然後，這將爲我們提供一個新的'類'名稱來掛鉤我們的樣式表。

步驟2

接下來，我們將構建supports()功能。

var supports = (function() { 

})(); 

爲什麼我們不支持等於標準函數？答案是因爲我們有一些準備工作要做，所以每次調用這個函數時都沒有理由重複這些任務。在這種情況下，最好使支持等於從自執行函數返回的任何內容。

步驟3

要測試的瀏覽器是否支持特定的性質，我們需要創建一個虛設元件，用於測試。這個生成的元素將永遠不會被插入到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 function(prop) { 

}; 

倒閉的美妙之處在於，即使supports()等於返回的函數，它仍然可以訪問div，vendors和len變量。

步驟4

即時測試：如果傳遞的屬性可到div style屬性，我們知道瀏覽器支持的屬性;所以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 will be 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

接下來，我們需要通過廠商的陣列來篩選和測試，如果有一個匹配。例如，如果箱陰影通過，我們應該測試，如果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語句來過濾數組，但在這種情況下並不需要真正的需要。 MozBoxShadow：

順序while語句是更快地鍵入，並需要更少的字符 有一個很小的性能改進 不要vendors[len] + prop;混淆只需更換與他們的現實生活價值觀的名字並不重要 。

步驟7

但是，如果沒有這些價值觀匹配的？在這種情況下，瀏覽器似乎不支持該屬性，在這種情況下，我們應該返回false。

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

這應該爲我們的功能做！讓我們測試一下，如果瀏覽器支持text-stroke屬性（只有webkit有），那麼通過將className應用於html元素。

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

步驟8：

用法 有了一個類名，我們現在可以鉤住，讓我們嘗試一下在我們的樣式表。

/* 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庫。