perf: collapse animate

components/_util/collapseMotion.tsx

@@ -2,10 +2,10 @@ import { nextTick } from 'vue';
 import { addClass, removeClass } from '../vc-util/Dom/class';
 import type { CSSMotionProps } from './transition';
 
-const collapseMotion = (name = 'ant-motion-collapse'): CSSMotionProps => {
+const collapseMotion = (name = 'ant-motion-collapse', appear = true): CSSMotionProps => {
   return {
     name,
-    appear: true,
+    appear,
     css: true,
     onBeforeEnter: (node: HTMLDivElement) => {
       node.style.height = '0px';

components/_util/openAnimation.js

@@ -1,67 +0,0 @@
-import cssAnimation from './css-animation';
-import { nextTick } from 'vue';
-import { requestAnimationTimeout, cancelAnimationTimeout } from './requestAnimationTimeout';
-
-function animate(node, show, done) {
-  let height;
-  let requestAnimationFrameId;
-  let appearRequestAnimationFrameId;
-  return cssAnimation(node, 'ant-motion-collapse-legacy', {
-    start() {
-      if (appearRequestAnimationFrameId) {
-        cancelAnimationTimeout(appearRequestAnimationFrameId);
-      }
-      if (!show) {
-        node.style.height = `${node.offsetHeight}px`;
-        node.style.opacity = '1';
-      } else {
-        height = node.offsetHeight;
-        // not get offsetHeight when appear
-        // set it into raf get correct offsetHeight
-        if (height === 0) {
-          appearRequestAnimationFrameId = requestAnimationTimeout(() => {
-            height = node.offsetHeight;
-            node.style.height = '0px';
-            node.style.opacity = '0';
-          });
-        } else {
-          node.style.height = '0px';
-          node.style.opacity = '0';
-        }
-      }
-    },
-    active() {
-      if (requestAnimationFrameId) {
-        cancelAnimationTimeout(requestAnimationFrameId);
-      }
-      requestAnimationFrameId = requestAnimationTimeout(() => {
-        node.style.height = `${show ? height : 0}px`;
-        node.style.opacity = show ? '1' : '0';
-      });
-    },
-    end() {
-      if (appearRequestAnimationFrameId) {
-        cancelAnimationTimeout(appearRequestAnimationFrameId);
-      }
-      if (requestAnimationFrameId) {
-        cancelAnimationTimeout(requestAnimationFrameId);
-      }
-      node.style.height = '';
-      node.style.opacity = '';
-      done && done();
-    },
-  });
-}
-
-const animation = {
-  onEnter(node, done) {
-    nextTick(() => {
-      animate(node, true, done);
-    });
-  },
-  onLeave(node, done) {
-    return animate(node, false, done);
-  },
-};
-
-export default animation;

components/collapse/Collapse.tsx

@@ -13,9 +13,9 @@ import { computed, defineComponent, ref, watch } from 'vue';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
 import firstNotUndefined from '../_util/firstNotUndefined';
 import classNames from '../_util/classNames';
-import animation from '../_util/openAnimation';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import type { CollapsePanelProps } from './CollapsePanel';
+import collapseMotion from '../_util/collapseMotion';
 
 type Key = number | string;
 
@@ -37,7 +37,7 @@ export default defineComponent({
     accordion: false,
     destroyInactivePanel: false,
     bordered: true,
-    openAnimation: animation,
+    openAnimation: collapseMotion('ant-motion-collapse', false),
     expandIconPosition: 'left',
   }),
   slots: ['expandIcon'],