The library for web and native user interfaces.
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;