diff --git a/components/upload/UploadList/listAnimation.ts b/components/upload/UploadList/listAnimation.ts index 9c37d266f..bcc4f6d00 100644 --- a/components/upload/UploadList/listAnimation.ts +++ b/components/upload/UploadList/listAnimation.ts @@ -2,15 +2,15 @@ import { addClass, removeClass } from '../../vc-util/Dom/class'; import { nextTick } from 'vue'; import type { CSSMotionProps } from '../../_util/transition'; -const listAnimation = (name): CSSMotionProps => { +const listAnimation = (name = 'ant-motion-collapse'): CSSMotionProps => { return { name, appear: true, css: true, onBeforeEnter: (node: HTMLDivElement) => { - addClass(node, name); node.style.height = '0px'; node.style.opacity = '0'; + addClass(node, name); }, onEnter: (node: HTMLDivElement) => { nextTick(() => { @@ -19,14 +19,16 @@ const listAnimation = (name): CSSMotionProps => { }); }, onAfterEnter: (node: HTMLDivElement) => { - if (node) removeClass(node, name); - node.style.height = undefined; - node.style.opacity = undefined; + if (node) { + removeClass(node, name); + node.style.height = null; + node.style.opacity = null; + } }, onBeforeLeave: (node: HTMLDivElement) => { addClass(node, name); node.style.height = `${node.offsetHeight}px`; - node.style.opacity = undefined; + node.style.opacity = null; }, onLeave: (node: HTMLDivElement) => { setTimeout(() => { @@ -35,9 +37,13 @@ const listAnimation = (name): CSSMotionProps => { }); }, onAfterLeave: (node: HTMLDivElement) => { - if (node) removeClass(node, name); - node.style.height = undefined; - node.style.opacity = undefined; + if (node) { + removeClass(node, name); + if (node.style) { + node.style.height = null; + node.style.opacity = null; + } + } }, }; };