From e010a2d90beb44b7d6751098eed512b61d3a42f2 Mon Sep 17 00:00:00 2001
From: Pete Hunt <pete@instagram.com>
Date: Mon, 9 Sep 2013 11:52:04 -0700
Subject: [PATCH] Fix bugs with CSS3 animation event in webkit

We were incorrectly sniffing the animationend event.
---
 .../transitions/ReactTransitionEvents.js      | 36 ++++++++++++-------
 .../transitions/ReactTransitionableChild.js   |  3 --
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/addons/transitions/ReactTransitionEvents.js b/src/addons/transitions/ReactTransitionEvents.js
index 0475d3aeb0..5a309d26d8 100644
--- a/src/addons/transitions/ReactTransitionEvents.js
+++ b/src/addons/transitions/ReactTransitionEvents.js
@@ -21,22 +21,34 @@
 var ExecutionEnvironment = require('ExecutionEnvironment');
 
 var EVENT_NAME_MAP = {
-  'transition': ['animationend', 'transitionend'],
-  'WebkitTransition': ['webkitAnimationEnd', 'webkitTransitionEnd'],
-  'MozTransition': ['mozAnimationEnd', 'mozTransitionEnd'],
-  'OTransition': ['oAnimationEnd', 'oTransitionEnd'],
-  'msTransition': ['MSAnimationEnd', 'MSTransitionEnd']
+  transitionend: {
+    'transition': 'transitionend',
+    'WebkitTransition': 'webkitTransitionEnd',
+    'MozTransition': 'mozTransitionEnd',
+    'OTransition': 'oTransitionEnd',
+    'msTransition': 'MSTransitionEnd'
+  },
+
+  animationend: {
+    'animation': 'animationend',
+    'WebkitAnimation': 'webkitAnimationEnd',
+    'MozAnimation': 'mozAnimationEnd',
+    'OAnimation': 'oAnimationEnd',
+    'msAnimation': 'MSAnimationEnd'
+  }
 };
 
-var endEvents = null;
+var endEvents = [];
 
 function detectEvents() {
   var testEl = document.createElement('div');
   var style = testEl.style;
-  for (var styleName in EVENT_NAME_MAP) {
-    if (styleName in style) {
-      endEvents = EVENT_NAME_MAP[styleName];
-      return;
+  for (var baseEventName in EVENT_NAME_MAP) {
+    for (var styleName in baseEventName) {
+      if (styleName in style) {
+        endEvents.push(EVENT_NAME_MAP[styleName]);
+        break;
+      }
     }
   }
 }
@@ -60,7 +72,7 @@ function removeEventListener(node, eventName, eventListener) {
 
 var ReactTransitionEvents = {
   addEndEventListener: function(node, eventListener) {
-    if (!endEvents) {
+    if (endEvents.length === 0) {
       // If CSS transitions are not supported, trigger an "end animation"
       // event immediately.
       window.setTimeout(eventListener, 0);
@@ -72,7 +84,7 @@ var ReactTransitionEvents = {
   },
 
   removeEndEventListener: function(node, eventListener) {
-    if (!endEvents) {
+    if (endEvents.length === 0) {
       return;
     }
     endEvents.forEach(function(endEvent) {
diff --git a/src/addons/transitions/ReactTransitionableChild.js b/src/addons/transitions/ReactTransitionableChild.js
index 75ec237a58..c15d4b263a 100644
--- a/src/addons/transitions/ReactTransitionableChild.js
+++ b/src/addons/transitions/ReactTransitionableChild.js
@@ -95,10 +95,7 @@ var ReactTransitionableChild = React.createClass({
 
   queueClass: function(className) {
     this.classNameQueue.push(className);
-    this.runNextTick(this.flushClassNameQueue);
-  },
 
-  runNextTick: function() {
     if (this.props.runNextTick) {
       this.props.runNextTick(this.flushClassNameQueue);
       return;