Merge pull request #747 from Johann-S/browser_transitionEnd

Fix transitionEnd on multiple browsers

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