| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- var START_EVENT_NAME_MAP = {
- transitionstart: {
- transition: 'transitionstart',
- WebkitTransition: 'webkitTransitionStart',
- MozTransition: 'mozTransitionStart',
- OTransition: 'oTransitionStart',
- msTransition: 'MSTransitionStart'
- },
- animationstart: {
- animation: 'animationstart',
- WebkitAnimation: 'webkitAnimationStart',
- MozAnimation: 'mozAnimationStart',
- OAnimation: 'oAnimationStart',
- msAnimation: 'MSAnimationStart'
- }
- };
- var END_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 startEvents = [];
- var endEvents = [];
- function detectEvents() {
- var testEl = document.createElement('div');
- var style = testEl.style;
- if (!('AnimationEvent' in window)) {
- delete START_EVENT_NAME_MAP.animationstart.animation;
- delete END_EVENT_NAME_MAP.animationend.animation;
- }
- if (!('TransitionEvent' in window)) {
- delete START_EVENT_NAME_MAP.transitionstart.transition;
- delete END_EVENT_NAME_MAP.transitionend.transition;
- }
- function process(EVENT_NAME_MAP, events) {
- for (var baseEventName in EVENT_NAME_MAP) {
- if (EVENT_NAME_MAP.hasOwnProperty(baseEventName)) {
- var baseEvents = EVENT_NAME_MAP[baseEventName];
- for (var styleName in baseEvents) {
- if (styleName in style) {
- events.push(baseEvents[styleName]);
- break;
- }
- }
- }
- }
- }
- process(START_EVENT_NAME_MAP, startEvents);
- process(END_EVENT_NAME_MAP, endEvents);
- }
- if (typeof window !== 'undefined' && typeof document !== 'undefined') {
- detectEvents();
- }
- function addEventListener(node, eventName, eventListener) {
- node.addEventListener(eventName, eventListener, false);
- }
- function removeEventListener(node, eventName, eventListener) {
- node.removeEventListener(eventName, eventListener, false);
- }
- var TransitionEvents = {
- // Start events
- startEvents: startEvents,
- addStartEventListener: function addStartEventListener(node, eventListener) {
- if (startEvents.length === 0) {
- setTimeout(eventListener, 0);
- return;
- }
- startEvents.forEach(function (startEvent) {
- addEventListener(node, startEvent, eventListener);
- });
- },
- removeStartEventListener: function removeStartEventListener(node, eventListener) {
- if (startEvents.length === 0) {
- return;
- }
- startEvents.forEach(function (startEvent) {
- removeEventListener(node, startEvent, eventListener);
- });
- },
- // End events
- endEvents: endEvents,
- addEndEventListener: function addEndEventListener(node, eventListener) {
- if (endEvents.length === 0) {
- setTimeout(eventListener, 0);
- return;
- }
- endEvents.forEach(function (endEvent) {
- addEventListener(node, endEvent, eventListener);
- });
- },
- removeEndEventListener: function removeEndEventListener(node, eventListener) {
- if (endEvents.length === 0) {
- return;
- }
- endEvents.forEach(function (endEvent) {
- removeEventListener(node, endEvent, eventListener);
- });
- }
- };
- export default TransitionEvents;
|