ant-design-vue/components/_util/css-animation/Event.js

131 lines
3.2 KiB
JavaScript
Raw Normal View History

2018-12-12 14:09:30 +00:00
const 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',
},
}
const END_EVENT_NAME_MAP = {
2018-02-04 03:08:04 +00:00
transitionend: {
transition: 'transitionend',
WebkitTransition: 'webkitTransitionEnd',
MozTransition: 'mozTransitionEnd',
OTransition: 'oTransitionEnd',
msTransition: 'MSTransitionEnd',
},
animationend: {
animation: 'animationend',
WebkitAnimation: 'webkitAnimationEnd',
MozAnimation: 'mozAnimationEnd',
OAnimation: 'oAnimationEnd',
msAnimation: 'MSAnimationEnd',
},
}
2018-12-12 14:09:30 +00:00
const startEvents = []
2018-02-04 03:08:04 +00:00
const endEvents = []
function detectEvents () {
const testEl = document.createElement('div')
const style = testEl.style
if (!('AnimationEvent' in window)) {
2018-12-12 14:09:30 +00:00
delete START_EVENT_NAME_MAP.animationstart.animation
delete END_EVENT_NAME_MAP.animationend.animation
2018-02-04 03:08:04 +00:00
}
if (!('TransitionEvent' in window)) {
2018-12-12 14:09:30 +00:00
delete START_EVENT_NAME_MAP.transitionstart.transition
delete END_EVENT_NAME_MAP.transitionend.transition
2018-02-04 03:08:04 +00:00
}
2018-12-12 14:09:30 +00:00
function process (EVENT_NAME_MAP, events) {
for (const baseEventName in EVENT_NAME_MAP) {
if (EVENT_NAME_MAP.hasOwnProperty(baseEventName)) {
const baseEvents = EVENT_NAME_MAP[baseEventName]
for (const styleName in baseEvents) {
if (styleName in style) {
events.push(baseEvents[styleName])
break
}
2018-02-04 03:08:04 +00:00
}
}
}
}
2018-12-12 14:09:30 +00:00
process(START_EVENT_NAME_MAP, startEvents)
process(END_EVENT_NAME_MAP, endEvents)
2018-02-04 03:08:04 +00:00
}
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)
}
const TransitionEvents = {
2018-12-12 14:09:30 +00:00
// Start events
startEvents,
addStartEventListener (node, eventListener) {
if (startEvents.length === 0) {
window.setTimeout(eventListener, 0)
return
}
startEvents.forEach((startEvent) => {
addEventListener(node, startEvent, eventListener)
})
},
removeStartEventListener (node, eventListener) {
if (startEvents.length === 0) {
return
}
startEvents.forEach((startEvent) => {
removeEventListener(node, startEvent, eventListener)
})
},
// End events
endEvents,
2018-02-04 03:08:04 +00:00
addEndEventListener (node, eventListener) {
if (endEvents.length === 0) {
window.setTimeout(eventListener, 0)
return
}
endEvents.forEach((endEvent) => {
addEventListener(node, endEvent, eventListener)
})
},
removeEndEventListener (node, eventListener) {
if (endEvents.length === 0) {
return
}
endEvents.forEach((endEvent) => {
removeEventListener(node, endEvent, eventListener)
})
},
}
export default TransitionEvents