perf: collapse tree

Author: tangjinzhou

components/vc-tree/MotionTreeNode.tsx

@@ -11,12 +11,11 @@ import {
   onBeforeUnmount,
   onMounted,
   ref,
-  shallowRef,
   Transition,
   watch,
 } from 'vue';
 import { treeNodeProps } from './props';
-import { collapseMotion } from '../_util/transition';
+import collapseMotion from '../_util/collapseMotion';
 
 export default defineComponent({
   name: 'MotionTreeNode',
@@ -36,20 +35,18 @@ export default defineComponent({
     const visible = ref(true);
     const context = useInjectTreeContext();
     const motionedRef = ref(false);
-    const transitionClass = ref('');
-    const transitionStyle = shallowRef({});
     const transitionProps = computed(() => {
       if (props.motion) {
         return props.motion;
       } else {
-        return collapseMotion(undefined, transitionStyle, transitionClass);
+        return collapseMotion();
       }
     });
-    const onMotionEnd = (type?: 'appear' | 'leave') => {
+    const onMotionEnd = (node?: HTMLDivElement, type?: 'appear' | 'leave') => {
       if (type === 'appear') {
-        transitionProps.value?.onAfterAppear?.();
+        transitionProps.value?.onAfterEnter?.(node);
       } else if (type === 'leave') {
-        transitionProps.value?.onAfterLeave?.();
+        transitionProps.value?.onAfterLeave?.(node);
       }
       if (!motionedRef.value) {
         props.onMotionEnd();
@@ -83,14 +80,10 @@ export default defineComponent({
           <Transition
             {...transitionProps.value}
             appear={motionType === 'show'}
-            onAfterAppear={() => onMotionEnd('appear')}
-            onAfterLeave={() => onMotionEnd('leave')}
+            onAfterAppear={(node: HTMLDivElement) => onMotionEnd(node, 'appear')}
+            onAfterLeave={(node: HTMLDivElement) => onMotionEnd(node, 'leave')}
           >
-            <div
-              v-show={visible.value}
-              class={[`${context.value.prefixCls}-treenode-motion`, transitionClass.value]}
-              style={transitionStyle.value}
-            >
+            <div v-show={visible.value} class={`${context.value.prefixCls}-treenode-motion`}>
               {motionNodes.map((treeNode: FlattenNode) => {
                 const {
                   data: { ...restProps },