From b98038e4928b971478dadfc414791c52fe3fcd62 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Fri, 6 Feb 2015 17:53:03 +0100 Subject: [PATCH] Fix transitionEnd on multiple browsers --- js/common.js | 18 ++++++++++++++++++ js/popovers.js | 4 ++-- js/push.js | 12 ++++++------ 3 files changed, 26 insertions(+), 8 deletions(-) diff --git a/js/common.js b/js/common.js index 770f456..4cad187 100755 --- a/js/common.js +++ b/js/common.js @@ -27,4 +27,22 @@ transform: pre[0].toUpperCase() + pre.substr(1) + 'Transform' }; })(); + + window.RATCHET.getTransitionEnd = (function () { + var el = document.createElement('ratchet'); + var transEndEventNames = { + WebkitTransition : 'webkitTransitionEnd', + MozTransition : 'transitionend', + OTransition : 'oTransitionEnd otransitionend', + transition : 'transitionend' + }; + + for (var name in transEndEventNames) { + if (el.style[name] !== undefined) { + return transEndEventNames[name]; + } + } + + return transEndEventNames.transition; + })(); }()); diff --git a/js/popovers.js b/js/popovers.js index d3e8f21..dc87b2b 100644 --- a/js/popovers.js +++ b/js/popovers.js @@ -26,7 +26,7 @@ var onPopoverHidden = function () { popover.style.display = 'none'; - popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); + popover.removeEventListener(window.RATCHET.getTransitionEnd, onPopoverHidden); }; var backdrop = (function () { @@ -35,7 +35,7 @@ element.classList.add('backdrop'); element.addEventListener('touchend', function () { - popover.addEventListener('webkitTransitionEnd', onPopoverHidden); + popover.addEventListener(window.RATCHET.getTransitionEnd, onPopoverHidden); popover.classList.remove('visible'); popover.parentNode.removeChild(backdrop); }); diff --git a/js/push.js b/js/push.js index 30ba23b..969f7fc 100644 --- a/js/push.js +++ b/js/push.js @@ -366,12 +366,12 @@ container.offsetWidth; // force reflow container.classList.remove('in'); var fadeContainerEnd = function () { - container.removeEventListener('webkitTransitionEnd', fadeContainerEnd); + container.removeEventListener(window.RATCHET.getTransitionEnd, fadeContainerEnd); swap.classList.add('in'); - swap.addEventListener('webkitTransitionEnd', fadeSwapEnd); + swap.addEventListener(window.RATCHET.getTransitionEnd, fadeSwapEnd); }; var fadeSwapEnd = function () { - swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd); + swap.removeEventListener(window.RATCHET.getTransitionEnd, fadeSwapEnd); container.parentNode.removeChild(container); swap.classList.remove('fade'); swap.classList.remove('in'); @@ -379,13 +379,13 @@ complete(); } }; - container.addEventListener('webkitTransitionEnd', fadeContainerEnd); + container.addEventListener(window.RATCHET.getTransitionEnd, fadeContainerEnd); } if (/slide/.test(transition)) { var slideEnd = function () { - swap.removeEventListener('webkitTransitionEnd', slideEnd); + swap.removeEventListener(window.RATCHET.getTransitionEnd, slideEnd); swap.classList.remove('sliding', 'sliding-in'); swap.classList.remove(swapDirection); container.parentNode.removeChild(container); @@ -399,7 +399,7 @@ containerDirection = enter ? 'left' : 'right'; container.classList.add(containerDirection); swap.classList.remove(swapDirection); - swap.addEventListener('webkitTransitionEnd', slideEnd); + swap.addEventListener(window.RATCHET.getTransitionEnd, slideEnd); } };