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

Я думал, кто-то может быть в состоянии только сказать что-то вроде «если (переход == ложь) {stop} "или что-то, что делает это, это было бы идеально.

Answer 1

Шаг 1

Давайте начнем с определения того, как мы хотим, чтобы вызвать нашу функцию. Мы будем держать здесь все в порядке; что-то вроде следующего должно сделать трюк:

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

Это должен быть заключительный вызов функции. Когда мы передаем имя свойства CSS функции supports(), оно вернет логическое значение. Если true, мы добавим имя класса в 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

Непосредственным тест: если передаваемое свойство доступно для атрибута стиля в Див, мы знаем, что браузер поддерживает свойство; поэтому 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 будет возвращен. Это значение чувствительно к регистру.

Case Sensitive Это означает, что, если пользователь передает 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 для фильтрации по массиву, в этом случае нет никакой реальной необходимости.

Порядок не важен в то время как заявления быстрее набирать, и требуют меньше символов Там крошечное улучшение производительности Не следует путать vendors[len] + prop; просто заменить эти имена с их реальными значениями: MozBoxShadow.

Шаг 7

Но что, если ни один из этих значения совпадают? В этом случае браузер, похоже, не поддерживает свойство, и в этом случае мы должны вернуть 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:

Использование с именем класса, который теперь мы можем зацепиться, давайте попробуем его в таблицу стилей.

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

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

Final Source Code

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 библиотеке.