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

perf: collapse tree

feat-css-var
tangjinzhou 2022-03-11 16:04:39 +08:00
parent 5bea601c34
commit a61ec0a7c9
1 changed files with 8 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/vc-tree/MotionTreeNode.tsx
View File

@ -11,12 +11,11 @@ import {
onBeforeUnmount, onBeforeUnmount,
onMounted, onMounted,
ref, ref,
shallowRef,
Transition, Transition,
watch, watch,
} from 'vue'; } from 'vue';
import { treeNodeProps } from './props'; import { treeNodeProps } from './props';
import { collapseMotion } from '../_util/transition'; import collapseMotion from '../_util/collapseMotion';
export default defineComponent({ export default defineComponent({
name: 'MotionTreeNode', name: 'MotionTreeNode',
@ -36,20 +35,18 @@ export default defineComponent({
const visible = ref(true); const visible = ref(true);
const context = useInjectTreeContext(); const context = useInjectTreeContext();
const motionedRef = ref(false); const motionedRef = ref(false);
const transitionClass = ref('');
const transitionStyle = shallowRef({});
const transitionProps = computed(() => { const transitionProps = computed(() => {
if (props.motion) { if (props.motion) {
return props.motion; return props.motion;
} else { } else {
return collapseMotion(undefined, transitionStyle, transitionClass); return collapseMotion();
} }
}); });
const onMotionEnd = (type?: 'appear' | 'leave') => { const onMotionEnd = (node?: HTMLDivElement, type?: 'appear' | 'leave') => {
if (type === 'appear') { if (type === 'appear') {
transitionProps.value?.onAfterAppear?.(); transitionProps.value?.onAfterEnter?.(node);
} else if (type === 'leave') { } else if (type === 'leave') {
transitionProps.value?.onAfterLeave?.(); transitionProps.value?.onAfterLeave?.(node);
} }
if (!motionedRef.value) { if (!motionedRef.value) {
props.onMotionEnd(); props.onMotionEnd();
@ -83,14 +80,10 @@ export default defineComponent({
<Transition <Transition
{...transitionProps.value} {...transitionProps.value}
appear={motionType === 'show'} appear={motionType === 'show'}
onAfterAppear={() => onMotionEnd('appear')} onAfterAppear={(node: HTMLDivElement) => onMotionEnd(node, 'appear')}
onAfterLeave={() => onMotionEnd('leave')} onAfterLeave={(node: HTMLDivElement) => onMotionEnd(node, 'leave')}
> >
<div <div v-show={visible.value} class={`${context.value.prefixCls}-treenode-motion`}>
v-show={visible.value}
class={[`${context.value.prefixCls}-treenode-motion`, transitionClass.value]}
style={transitionStyle.value}
>
{motionNodes.map((treeNode: FlattenNode) => { {motionNodes.map((treeNode: FlattenNode) => {
const { const {
data: { ...restProps }, data: { ...restProps },