refactor: menu

components/_util/transition.tsx

@@ -1,4 +1,12 @@
-import { defineComponent, nextTick, Transition as T, TransitionGroup as TG } from 'vue';
+import {
+  BaseTransitionProps,
+  CSSProperties,
+  defineComponent,
+  nextTick,
+  Ref,
+  Transition as T,
+  TransitionGroup as TG,
+} from 'vue';
 import { findDOMNode } from './props-util';
 
 export const getTransitionProps = (transitionName: string, opt: object = {}) => {
@@ -80,6 +88,63 @@ if (process.env.NODE_ENV === 'test') {
   });
 }
 
-export { Transition, TransitionGroup };
+export declare type MotionEvent = (TransitionEvent | AnimationEvent) & {
+  deadline?: boolean;
+};
+
+export declare type MotionEventHandler = (element: Element, done?: () => void) => CSSProperties;
+
+export declare type MotionEndEventHandler = (element: Element, done?: () => void) => boolean | void;
+
+// ================== Collapse Motion ==================
+const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
+const getRealHeight: MotionEventHandler = node => ({
+  height: `${node.scrollHeight}px`,
+  opacity: 1,
+});
+const getCurrentHeight: MotionEventHandler = (node: any) => ({ height: `${node.offsetHeight}px` });
+// const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
+//   (event as TransitionEvent).propertyName === 'height';
+
+export interface CSSMotionProps extends Partial<BaseTransitionProps<Element>> {
+  name?: string;
+  css?: boolean;
+}
+
+const collapseMotion = (style: Ref<CSSProperties>, className: Ref<string>): CSSMotionProps => {
+  return {
+    name: 'ant-motion-collapse',
+    appear: true,
+    css: true,
+    onBeforeEnter: node => {
+      className.value = 'ant-motion-collapse';
+      style.value = getCollapsedHeight(node);
+    },
+    onEnter: node => {
+      nextTick(() => {
+        style.value = getRealHeight(node);
+      });
+    },
+    onAfterEnter: () => {
+      className.value = '';
+      style.value = {};
+    },
+    onBeforeLeave: node => {
+      className.value = 'ant-motion-collapse';
+      style.value = getCurrentHeight(node);
+    },
+    onLeave: node => {
+      window.setTimeout(() => {
+        style.value = getCollapsedHeight(node);
+      });
+    },
+    onAfterLeave: () => {
+      className.value = '';
+      style.value = {};
+    },
+  };
+};
+
+export { Transition, TransitionGroup, collapseMotion };
 
 export default Transition;