You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.1 KiB
109 lines
3.1 KiB
/** |
|
* Copyright 2013-2015, Facebook, Inc. |
|
* All rights reserved. |
|
* |
|
* This source code is licensed under the BSD-style license found in the |
|
* LICENSE file in the root directory of this source tree. An additional grant |
|
* of patent rights can be found in the PATENTS file in the same directory. |
|
* |
|
* @providesModule ReactTransitionEvents |
|
*/ |
|
|
|
'use strict'; |
|
|
|
var ExecutionEnvironment = require("./ExecutionEnvironment"); |
|
|
|
/** |
|
* EVENT_NAME_MAP is used to determine which event fired when a |
|
* transition/animation ends, based on the style property used to |
|
* define that event. |
|
*/ |
|
var EVENT_NAME_MAP = { |
|
transitionend: { |
|
'transition': 'transitionend', |
|
'WebkitTransition': 'webkitTransitionEnd', |
|
'MozTransition': 'mozTransitionEnd', |
|
'OTransition': 'oTransitionEnd', |
|
'msTransition': 'MSTransitionEnd' |
|
}, |
|
|
|
animationend: { |
|
'animation': 'animationend', |
|
'WebkitAnimation': 'webkitAnimationEnd', |
|
'MozAnimation': 'mozAnimationEnd', |
|
'OAnimation': 'oAnimationEnd', |
|
'msAnimation': 'MSAnimationEnd' |
|
} |
|
}; |
|
|
|
var endEvents = []; |
|
|
|
function detectEvents() { |
|
var testEl = document.createElement('div'); |
|
var style = testEl.style; |
|
|
|
// On some platforms, in particular some releases of Android 4.x, |
|
// the un-prefixed "animation" and "transition" properties are defined on the |
|
// style object but the events that fire will still be prefixed, so we need |
|
// to check if the un-prefixed events are useable, and if not remove them |
|
// from the map |
|
if (!('AnimationEvent' in window)) { |
|
delete EVENT_NAME_MAP.animationend.animation; |
|
} |
|
|
|
if (!('TransitionEvent' in window)) { |
|
delete EVENT_NAME_MAP.transitionend.transition; |
|
} |
|
|
|
for (var baseEventName in EVENT_NAME_MAP) { |
|
var baseEvents = EVENT_NAME_MAP[baseEventName]; |
|
for (var styleName in baseEvents) { |
|
if (styleName in style) { |
|
endEvents.push(baseEvents[styleName]); |
|
break; |
|
} |
|
} |
|
} |
|
} |
|
|
|
if (ExecutionEnvironment.canUseDOM) { |
|
detectEvents(); |
|
} |
|
|
|
// We use the raw {add|remove}EventListener() call because EventListener |
|
// does not know how to remove event listeners and we really should |
|
// clean up. Also, these events are not triggered in older browsers |
|
// so we should be A-OK here. |
|
|
|
function addEventListener(node, eventName, eventListener) { |
|
node.addEventListener(eventName, eventListener, false); |
|
} |
|
|
|
function removeEventListener(node, eventName, eventListener) { |
|
node.removeEventListener(eventName, eventListener, false); |
|
} |
|
|
|
var ReactTransitionEvents = { |
|
addEndEventListener: function(node, eventListener) { |
|
if (endEvents.length === 0) { |
|
// If CSS transitions are not supported, trigger an "end animation" |
|
// event immediately. |
|
window.setTimeout(eventListener, 0); |
|
return; |
|
} |
|
endEvents.forEach(function(endEvent) { |
|
addEventListener(node, endEvent, eventListener); |
|
}); |
|
}, |
|
|
|
removeEndEventListener: function(node, eventListener) { |
|
if (endEvents.length === 0) { |
|
return; |
|
} |
|
endEvents.forEach(function(endEvent) { |
|
removeEventListener(node, endEvent, eventListener); |
|
}); |
|
} |
|
}; |
|
|
|
module.exports = ReactTransitionEvents;
|
|
|