Fix bugs with CSS3 animation event in webkit
We were incorrectly sniffing the animationend event.
Pete Hunt committed
Sep 9, 2013 at 11:52 UTC
e010a2d90beb44b7d6751098eed512b61d3a42f2
2 files changed
+24
-15
src/addons/transitions/ReactTransitionEvents.js
+24
-12
@@ -21,22 +21,34 @@
21
var ExecutionEnvironment = require('ExecutionEnvironment');
22
23
var EVENT_NAME_MAP = {
24
- 'transition': ['animationend', 'transitionend'],
25
- 'WebkitTransition': ['webkitAnimationEnd', 'webkitTransitionEnd'],
26
- 'MozTransition': ['mozAnimationEnd', 'mozTransitionEnd'],
27
- 'OTransition': ['oAnimationEnd', 'oTransitionEnd'],
28
- 'msTransition': ['MSAnimationEnd', 'MSTransitionEnd']
24
+ transitionend: {
25
+ 'transition': 'transitionend',
26
+ 'WebkitTransition': 'webkitTransitionEnd',
27
+ 'MozTransition': 'mozTransitionEnd',
28
+ 'OTransition': 'oTransitionEnd',
29
+ 'msTransition': 'MSTransitionEnd'
30
+ },
31
+
32
+ animationend: {
33
+ 'animation': 'animationend',
34
+ 'WebkitAnimation': 'webkitAnimationEnd',
35
+ 'MozAnimation': 'mozAnimationEnd',
36
+ 'OAnimation': 'oAnimationEnd',
37
+ 'msAnimation': 'MSAnimationEnd'
38
+ }
39
};
40
31
-var endEvents = null;
41
+var endEvents = [];
42
43
function detectEvents() {
44
var testEl = document.createElement('div');
45
var style = testEl.style;
36
- for (var styleName in EVENT_NAME_MAP) {
37
- if (styleName in style) {
38
- endEvents = EVENT_NAME_MAP[styleName];
39
- return;
46
+ for (var baseEventName in EVENT_NAME_MAP) {
47
+ for (var styleName in baseEventName) {
48
+ if (styleName in style) {
49
+ endEvents.push(EVENT_NAME_MAP[styleName]);
50
+ break;
51
+ }
52
}
53
}
54
}
@@ -60,7 +72,7 @@ function removeEventListener(node, eventName, eventListener) {
72
73
var ReactTransitionEvents = {
74
addEndEventListener: function(node, eventListener) {
63
- if (!endEvents) {
75
+ if (endEvents.length === 0) {
76
// If CSS transitions are not supported, trigger an "end animation"
77
// event immediately.
78
window.setTimeout(eventListener, 0);
@@ -72,7 +84,7 @@ var ReactTransitionEvents = {
84
},
85
86
removeEndEventListener: function(node, eventListener) {
75
- if (!endEvents) {
87
+ if (endEvents.length === 0) {
88
return;
89
}
90
endEvents.forEach(function(endEvent) {
src/addons/transitions/ReactTransitionableChild.js
-3
@@ -95,10 +95,7 @@ var ReactTransitionableChild = React.createClass({
95
96
queueClass: function(className) {
97
this.classNameQueue.push(className);
98
- this.runNextTick(this.flushClassNameQueue);
99
- },
98
101
- runNextTick: function() {
99
if (this.props.runNextTick) {
100
this.props.runNextTick(this.flushClassNameQueue);
101
return;