fix: Cross-browser animations

Pearson-Higher-Ed · Nov 29, 2016 · 494018c · 494018c
1 parent 2ac1a17
commit 494018c
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/src/js/component-owner.js b/src/js/component-owner.js
@@ -26,16 +26,32 @@ class AlertsComponent extends React.Component {
 
   handleClose = () => {
 
+    const whichTransitionEvent = () => {
+      let transition;
+      const transitions = {
+        transition: 'animationend',
+        WebkitTransition: 'webkitAnimationEnd'
+      };
+
+      Object.keys(transitions).forEach(function(transitionKey) {
+        if (targetAlert.style[transitionKey] !== undefined) {
+          transition = transitions[transitionKey];
+        }
+      });
+
+      return transition;
+    };
+
     const reset = () => {
       this.setState({ open: false, opacity: 0, closeProp: '' });
       if (this.state.open === false) {
-        targetAlert.removeEventListener('webkitAnimationEnd', reset);
+        targetAlert.removeEventListener(whichTransitionEvent(), reset);
       }
     }
 
     this.setState({ closeProp: 'close-title-animation' });
 
-    targetAlert.addEventListener('webkitAnimationEnd', reset);
+    targetAlert.addEventListener(whichTransitionEvent(), reset);
 
   };
 
@@ -55,8 +71,6 @@ class AlertsComponent extends React.Component {
         } <br/><br/><br/><br/>
 
         <button className="test-button">Success</button>
-
-
       </div>
     );
   }