diff --git a/src/addons/transitions/ReactTransitionEvents.js b/src/addons/transitions/ReactTransitionEvents.js index 0475d3aeb0c6d..ed968336cb2c5 100644 --- a/src/addons/transitions/ReactTransitionEvents.js +++ b/src/addons/transitions/ReactTransitionEvents.js @@ -21,22 +21,29 @@ var ExecutionEnvironment = require('ExecutionEnvironment'); var EVENT_NAME_MAP = { - 'transition': ['animationend', 'transitionend'], - 'WebkitTransition': ['webkitAnimationEnd', 'webkitTransitionEnd'], - 'MozTransition': ['mozAnimationEnd', 'mozTransitionEnd'], - 'OTransition': ['oAnimationEnd', 'oTransitionEnd'], - 'msTransition': ['MSAnimationEnd', 'MSTransitionEnd'] + // Transition events + 'transition': 'transitionend', + 'WebkitTransition': 'webkitTransitionEnd', + 'MozTransition': 'mozTransitionEnd', + 'OTransition': 'oTransitionEnd', + 'msTransition': 'MSTransitionEnd', + + // Animation events + '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; + endEvents.push(EVENT_NAME_MAP[styleName]); } } } @@ -60,7 +67,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 +79,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 75ec237a58f71..c15d4b263aa87 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;