feat: update css-animation

Author: tangjinzhou

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,31 +34,39 @@ const EVENT_NAME_MAP = {
   },
 }
 
+const startEvents = []
 const endEvents = []
 
 function detectEvents () {
   const testEl = document.createElement('div')
   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
-

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'

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"
     }
-}
+}