From aba16db339395a29277ab104fa68249ee32789ab Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 12 Dec 2018 22:09:30 +0800 Subject: [PATCH] feat: update css-animation --- components/_util/css-animation/Event.js | 74 ++++++++++++++++++++----- components/_util/css-animation/index.js | 2 + package.json | 3 +- 3 files changed, 64 insertions(+), 15 deletions(-) diff --git a/components/_util/css-animation/Event.js b/components/_util/css-animation/Event.js index 06e69a471..d35c67345 100644 --- a/components/_util/css-animation/Event.js +++ b/components/_util/css-animation/Event.js @@ -1,4 +1,22 @@ -const EVENT_NAME_MAP = { +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 = { transitionend: { transition: 'transitionend', WebkitTransition: 'webkitTransitionEnd', @@ -16,6 +34,7 @@ const EVENT_NAME_MAP = { }, } +const startEvents = [] const endEvents = [] function detectEvents () { @@ -23,24 +42,31 @@ function detectEvents () { const style = testEl.style if (!('AnimationEvent' in window)) { - delete EVENT_NAME_MAP.animationend.animation + delete START_EVENT_NAME_MAP.animationstart.animation + delete END_EVENT_NAME_MAP.animationend.animation } if (!('TransitionEvent' in window)) { - delete EVENT_NAME_MAP.transitionend.transition + delete START_EVENT_NAME_MAP.transitionstart.transition + delete END_EVENT_NAME_MAP.transitionend.transition } - 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) { - endEvents.push(baseEvents[styleName]) - break + 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 + } } } } } + + process(START_EVENT_NAME_MAP, startEvents) + process(END_EVENT_NAME_MAP, endEvents) } if (typeof window !== 'undefined' && typeof document !== 'undefined') { @@ -56,6 +82,31 @@ function removeEventListener (node, eventName, eventListener) { } const TransitionEvents = { + // 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, + addEndEventListener (node, eventListener) { if (endEvents.length === 0) { window.setTimeout(eventListener, 0) @@ -66,8 +117,6 @@ const TransitionEvents = { }) }, - endEvents, - removeEndEventListener (node, eventListener) { if (endEvents.length === 0) { return @@ -79,4 +128,3 @@ const TransitionEvents = { } export default TransitionEvents - diff --git a/components/_util/css-animation/index.js b/components/_util/css-animation/index.js index 252b49d24..0766ff613 100644 --- a/components/_util/css-animation/index.js +++ b/components/_util/css-animation/index.js @@ -1,3 +1,5 @@ +// https://github.com/yiminghe/css-animation 1.5.0 + import Event from './Event' import classes from 'component-classes' import { requestAnimationTimeout, cancelAnimationTimeout } from '../requestAnimationTimeout' diff --git a/package.json b/package.json index 796b5d96e..e9ccc635f 100644 --- a/package.json +++ b/package.json @@ -124,7 +124,6 @@ "minimist": "^1.2.0", "mkdirp": "^0.5.1", "mockdate": "^2.0.2", - "moment-timezone": "^0.5.17", "nprogress": "^0.2.0", "postcss": "^6.0.20", "postcss-loader": "^2.1.2", @@ -184,4 +183,4 @@ "vue-ref": "^1.0.3", "warning": "^3.0.0" } -} +} \ No newline at end of file