Last active
February 26, 2020 20:59
-
-
Save foolyoghurt/b76988ef05fbeaaf04ae to your computer and use it in GitHub Desktop.
polyfill for detecting AnimationEnd and TransitionEnd event - from ReactTransitionEvents.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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; | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment