From a5e4963104b7ca8c11cacb6486c8e07196dd7728 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Tue, 22 Feb 2022 23:51:36 +0800
Subject: [PATCH] refactor: upload

---
 components/upload/UploadList/index.tsx        |  4 ++
 components/upload/UploadList/listAnimation.ts | 44 +++++++++++++++++++
 components/upload/demo/picture-style.vue      |  7 +--
 3 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 components/upload/UploadList/listAnimation.ts

diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx
index 206636c53..bcc19773a 100644
--- a/components/upload/UploadList/index.tsx
+++ b/components/upload/UploadList/index.tsx
@@ -14,6 +14,7 @@ import { initDefaultProps, isValidElement } from '../../_util/props-util';
 import type { VueNode } from '../../_util/type';
 import useConfigInject from '../../_util/hooks/useConfigInject';
 import { getTransitionGroupProps, TransitionGroup } from '../../_util/transition';
+import listAnimation from './listAnimation';
 
 const HackSlot = (_, { slots }) => {
   return slots.default?.()[0];
@@ -142,6 +143,9 @@ export default defineComponent({
       [`${prefixCls.value}-list-rtl`]: direction.value === 'rtl',
     }));
     const transitionGroupProps = computed(() => ({
+      ...listAnimation(
+        `${prefixCls.value}-${props.listType === 'picture-card' ? 'animate-inline' : 'animate'}`,
+      ),
       ...getTransitionGroupProps(
         `${prefixCls.value}-${props.listType === 'picture-card' ? 'animate-inline' : 'animate'}`,
       ),
diff --git a/components/upload/UploadList/listAnimation.ts b/components/upload/UploadList/listAnimation.ts
new file mode 100644
index 000000000..9c37d266f
--- /dev/null
+++ b/components/upload/UploadList/listAnimation.ts
@@ -0,0 +1,44 @@
+import { addClass, removeClass } from '../../vc-util/Dom/class';
+import { nextTick } from 'vue';
+import type { CSSMotionProps } from '../../_util/transition';
+
+const listAnimation = (name): CSSMotionProps => {
+  return {
+    name,
+    appear: true,
+    css: true,
+    onBeforeEnter: (node: HTMLDivElement) => {
+      addClass(node, name);
+      node.style.height = '0px';
+      node.style.opacity = '0';
+    },
+    onEnter: (node: HTMLDivElement) => {
+      nextTick(() => {
+        node.style.height = `${node.scrollHeight}px`;
+        node.style.opacity = '1';
+      });
+    },
+    onAfterEnter: (node: HTMLDivElement) => {
+      if (node) removeClass(node, name);
+      node.style.height = undefined;
+      node.style.opacity = undefined;
+    },
+    onBeforeLeave: (node: HTMLDivElement) => {
+      addClass(node, name);
+      node.style.height = `${node.offsetHeight}px`;
+      node.style.opacity = undefined;
+    },
+    onLeave: (node: HTMLDivElement) => {
+      setTimeout(() => {
+        node.style.height = '0px';
+        node.style.opacity = '0';
+      });
+    },
+    onAfterLeave: (node: HTMLDivElement) => {
+      if (node) removeClass(node, name);
+      node.style.height = undefined;
+      node.style.opacity = undefined;
+    },
+  };
+};
+export default listAnimation;
diff --git a/components/upload/demo/picture-style.vue b/components/upload/demo/picture-style.vue
index 9ad5b92a9..1782f0e75 100644
--- a/components/upload/demo/picture-style.vue
+++ b/components/upload/demo/picture-style.vue
@@ -99,10 +99,7 @@ export default defineComponent({
   width: 200px;
   margin-right: 8px;
 }
-.upload-list-inline :deep(.ant-upload-animate-enter) {
-  animation-name: uploadAnimateInlineIn;
-}
-.upload-list-inline :deep(.ant-upload-animate-leave) {
-  animation-name: uploadAnimateInlineOut;
+.upload-list-inline [class*='-upload-list-rtl'] :deep(.ant-upload-list-item) {
+  float: right;
 }
 </style>