refactor: upload

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'}`,
       ),

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;

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>