fix: fix the flex gap problem (#48522)

ant-design · Apr 18, 2024 · c8f6aee · c8f6aee
1 parent 273104c
commit c8f6aee
Showing 1 changed file with 21 additions and 20 deletions.
diff --git a/components/upload/style/motion.ts b/components/upload/style/motion.ts
@@ -4,30 +4,31 @@ import type { UploadToken } from '.';
 import { initFadeMotion } from '../../style/motion';
 import type { GenerateStyle } from '../../theme/internal';
 
-const uploadAnimateInlineIn = new Keyframes('uploadAnimateInlineIn', {
-  from: {
-    width: 0,
-    height: 0,
-    margin: 0,
-    padding: 0,
-    opacity: 0,
-  },
-});
-
-const uploadAnimateInlineOut = new Keyframes('uploadAnimateInlineOut', {
-  to: {
-    width: 0,
-    height: 0,
-    margin: 0,
-    padding: 0,
-    opacity: 0,
-  },
-});
 // =========================== Motion ===========================
 const genMotionStyle: GenerateStyle<UploadToken> = (token) => {
   const { componentCls } = token;
-  const inlineCls = `${componentCls}-animate-inline`;
 
+  const uploadAnimateInlineIn = new Keyframes('uploadAnimateInlineIn', {
+    from: {
+      width: 0,
+      height: 0,
+      padding: 0,
+      opacity: 0,
+      margin: `calc(${token.marginXS} / -2)`,
+    },
+  });
+
+  const uploadAnimateInlineOut = new Keyframes('uploadAnimateInlineOut', {
+    to: {
+      width: 0,
+      height: 0,
+      padding: 0,
+      opacity: 0,
+      margin: `calc(${token.marginXS} / -2)`,
+    },
+  });
+
+  const inlineCls = `${componentCls}-animate-inline`;
   return [
     {
       [`${componentCls}-wrapper`]: {