/Else Javascriptステートメントでトランジションアニメーションを無効にすると失敗する場合

Question

ハンバーガーメニューボタンがあるナビゲーションバーがあります。オープン/クローズのjavascriptアニメーションを追加する前に、ナビゲーションメニューがすべてのブラウザで機能しました。いくつかの古いブラウザでは、残念なことに、このスクリプトは、クリックされたときにメニューがまったく開かないようにします。しかし、それはほとんどの新しいブラウザで動作します。古いブラウザがナビゲーションバーを開くことができるようにスクリプトが正しく実行されない場合、スクリプトを停止させる必要があります。

"something"がfalseの場合、スクリプトの実行を停止する簡単な修正が書かれています。

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

私は誰かがちょうど（遷移が== false）の場合」のような何かを言うことができるかもしれ考えていました{停止} "かそれを行う何か、それは完全である。

Answer 1

ステップ1

のは、我々は関数を呼び出すしたい方法を決定することから始めましょう。私たちは物事をここでシンプルに保ちます。次のような何かがトリックを行う必要があります：

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

これは最終的な関数呼び出しでなければなりません。 supports()関数にCSSプロパティ名を渡すと、ブール値が返されます。 trueの場合は、documentElementまたは<html>にclassNameを追加します。これにより、スタイルシートから新しい「クラス」という名前が付けられます。

ステップ2

次に、我々はsupports()機能を構築します。

var supports = (function() { 

})(); 

なぜ私たちは標準機能と同等のサポートをしていませんか？その答えは、まず最初に行う予備作業があり、関数が呼び出されるたびにこれらのタスクを何度も何度も繰り返す必要はないからです。このような場合には、自己実行機能から返されるものと同等のサポートを行うことが最善です。

ステップ3

ブラウザが特定のプロパティをサポートしているかどうかをテストするには、我々はテストのために、ダミー要素を作成する必要があります。この生成された要素は、実際にDOMに挿入されることはありません。それをテストダミーと考えてください！

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

あなたはおそらくの認識しているとしてCSS3プロパティで作業する場合、我々が使用できるベンダープレフィックスの一握りは、あります

-moz 
-webkit 
-o 
-ms 
-khtml 

私たちのJavaScriptが通じフィルタリングする必要があります。これらのプレフィックスをテストしてテストします。だから、それらを配列に配置しましょう。我々はベンダーと呼ぶだろう。文字列から配列を作成するsplit()機能を使用して

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

は確かに怠け者ですが、それは秒の一握りを節約します！

この配列をフィルタリングするので、男の子と女の子をよくし、配列の長さもキャッシュしてみましょう。

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

準備作業は、上記の、自然の中で、静的であり、我々はsupports()を呼び出すたびに繰り返す必要はありません。これは、ページが読み込まれたときに一度だけ実行する理由です。さて、supports変数に実際に代入される関数を返しましょう。

return function(prop) { 

}; 

クロージャの美しさは、機能を返さsupports()がそれと同じであっても、それはまだdivへのアクセス、vendors、およびlen変数を持っている、ということです。

ステップ4

即時テスト：合格プロパティはdiv要素のスタイル属性に使用可能な場合、我々はブラウザがプロパティをサポートしています知っています。だからreturn true。

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

たとえば、text-shadow CSS3のプロパティを考えてください。現代のブラウザーのほとんどは、ベンダープレフィックスを必要とせずにサポートしています。そのことを念頭に置いて、なぜ必要ない場合は、すべてのプレフィックスをフィルタリングするのですか？だから私たちはこの小切手を一番上に置いたのです。あなたはおそらくそうのような、CSS3プロパティ名を入力するために使用している5

ステップ：-moz-box-shadow。しかし、Firebugでスタイルオブジェクトを確認すると、スペルがあることがわかります。MozBoxShadow。したがって、私たちがテストすれば：

'mozboxShadow' in div.style // false 

偽が返されます。この値は大文字と小文字が区別されます。

大文字と小文字の区別 これは、ユーザーがboxShadowをsupports()関数に渡すと、関数が失敗することを意味します。前もって考えて、引数の最初の文字が小文字であるかどうかを確認しましょう。そうであれば、エラーを修正します。

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

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

}; 

レスキューへの正規表現！上の例では、文字列（^）の先頭に小文字が1つしかないかどうかを確認しています。見つかったという条件でのみ、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文を使用して配列をフィルタリングすることもできますが、この場合は本当に必要ありません。

順序は文が入力する迅速であり、 少ない文字を必要としながら、小さなパフォーマンスの向上は、単に彼らの実際の値を使用してそれらの名前を置き換えるvendors[len] + prop;に惑わされないでください あります 重要ではありません：MozBoxShadow。

ステップ7

しかし、どのようなこれらの値が一致するのであればどれ？その場合、ブラウザはプロパティをサポートしていないようです。この場合、falseを返す必要があります。

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

これは、私たちの機能にとって必要です。ブラウザが例えばtext-strokeプロパティ（webkitのみ）をサポートしている場合は、html要素にclassNameを適用して、テストしてみましょう。

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ライブラリを参照してください。