github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: upload height error, close #5298

pull/5317/head
tangjinzhou 2022-03-02 14:05:33 +08:00
parent 55e0ad7f92
commit 991fa776cf
1 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/upload/UploadList/listAnimation.ts
View File

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