feat: support expand animation

Author: ChuChencheng

examples/Feature.vue

@@ -10,6 +10,7 @@
  ref="basicTreeRef"
  :data="basicUsage"
  :nodeClassName="node => `generated-class-${node.id}`"
+ animation
  @click="handleClick"
  @node-dblclick="handleDblClick"
  @node-right-click="handleRightClick"
@@ -145,10 +146,10 @@
  <div class="interface">
  <div style="height: 300px">
  <VTree
- ref="basicTreeRef"
  :data="showLineTreeData"
  :showLine="{ type: showLineType, polyline: showLinePolyline }"
  defaultExpandAll
+ animation
  />
  </div>
  </div>

src/components/Tree.vue

@@ -10,18 +10,14 @@
  <div :class="blockAreaCls">
  <div :style="{ height: `${topSpaceHeight}px` }"></div>
  <VTreeNode
- v-for="node in renderNodes"
+ v-for="node in (expandAnimation.ready.value ? expandAnimation.topNodes.value : renderNodes)"
  v-bind="treeNodeProps"
  :key="node[keyField]"
  :data="node"
  :getNode="getNode"
  :noSiblingNodeMap="noSiblingNodeMap"
  v-on="treeNodeListeners"
- :class="
- typeof nodeClassName === 'function'
- ? nodeClassName(node)
- : nodeClassName
- "
+ :class="getNodeClassName(node)"
  :style="{
  minHeight: `${nodeMinHeight}px`,
  }"
@@ -30,6 +26,55 @@
  @expand="handleNodeExpand"
  @node-drop="handleNodeDrop"
  />
+ <template v-if="expandAnimation.ready.value">
+ <Transition
+ name="vtree-expand-animation"
+ @after-enter="expandAnimation.onExpandAnimationFinish"
+ @after-leave="expandAnimation.onExpandAnimationFinish"
+ >
+ <div
+ v-show="expandAnimation.currentExpandState.value"
+ :style="{
+ display: 'grid',
+ }"
+ >
+ <div :style="{ overflow: 'hidden' }">
+ <VTreeNode
+ v-for="node in expandAnimation.middleNodes.value"
+ v-bind="treeNodeProps"
+ :key="node[keyField]"
+ :data="node"
+ :getNode="getNode"
+ :noSiblingNodeMap="noSiblingNodeMap"
+ :class="getNodeClassName(node)"
+ :style="{
+ minHeight: `${nodeMinHeight}px`,
+ }"
+ @check="handleNodeCheck"
+ @select="handleNodeSelect"
+ @expand="handleNodeExpand"
+ @node-drop="handleNodeDrop"
+ />
+ </div>
+ </div>
+ </Transition>
+ <VTreeNode
+ v-for="node in expandAnimation.bottomNodes.value"
+ v-bind="treeNodeProps"
+ :key="node[keyField]"
+ :data="node"
+ :getNode="getNode"
+ :noSiblingNodeMap="noSiblingNodeMap"
+ :class="getNodeClassName(node)"
+ :style="{
+ minHeight: `${nodeMinHeight}px`,
+ }"
+ @check="handleNodeCheck"
+ @select="handleNodeSelect"
+ @expand="handleNodeExpand"
+ @node-drop="handleNodeDrop"
+ />
+ </template>
  <div :style="{ height: `${bottomSpaceHeight}px` }"></div>
  </div>
  </div>
@@ -153,6 +198,9 @@ export interface TreeProps {
  /** 连接线 */
  showLine?: boolean | ShowLine
 
+ /** 是否启用过渡动画，目前仅控制展开收起 */
+ animation?: boolean
+
  /** 子节点缩进 */
  nodeIndent?: number,
 
@@ -225,6 +273,7 @@ import { useIframeResize } from '../hooks/useIframeResize'
 import { usePublicTreeAPI } from '../hooks/usePublicTreeAPI'
 import { FilterFunctionType } from '../store/tree-store'
 import { pickReadonly } from '../utils'
+import { useExpandAnimation } from '../hooks/useExpandAnimation'
 
 const props = withDefaults(defineProps<TreeProps>(), DEFAULT_TREE_PROPS)
 
@@ -306,6 +355,8 @@ const {
  scrollTo,
 } = useVirtualList(nonReactive, props)
 
+const expandAnimation = useExpandAnimation(renderNodes, props)
+
 const {
  unloadCheckedNodes,
  isRootLoading,
@@ -347,6 +398,10 @@ const {
  updateRender,
 })
 
+const getNodeClassName = (node: TreeNode) => {
+ return typeof props.nodeClassName === 'function' ? props.nodeClassName(node) : props.nodeClassName
+}
+
 const noSiblingNodeMap = computed(() => {
  const parentsOfFirstNode: TreeNode[] = []
  let nodeParent = renderNodes.value[0]?._parent
@@ -421,6 +476,7 @@ const handleNodeSelect = (node: TreeNode): void => {
  nonReactive.store.setSelected(node[props.keyField], !node.selected)
 }
 const handleNodeExpand = (node: TreeNode): void => {
+ expandAnimation.updateBeforeExpand(node)
  nonReactive.store.setExpand(node[props.keyField], !node.expand)
 }
 const handleNodeDrop = (
@@ -553,6 +609,7 @@ const emitSelectableInput = (
 }
 
 onMounted(() => {
+ nonReactive.store.on('expand', expandAnimation.updateAfterExpand)
  nonReactive.store.on('visible-data-change', updateBlockNodes)
  nonReactive.store.on('render-data-change', updateRender)
  nonReactive.store.on(

src/components/TreeDrop.vue

@@ -20,7 +20,7 @@
  </div>
 
  <!-- 下拉框 -->
- <transition name="vtree-dropdown">
+ <Transition name="vtree-dropdown">
  <div
  ref="dropdownRef"
  v-show="dropdownVisible"
@@ -43,7 +43,7 @@
  </template>
  </VTreeSearch>
  </div>
- </transition>
+ </Transition>
  </div>
 </template>
 

src/hooks/useExpandAnimation.ts

@@ -0,0 +1,106 @@
+import { Ref, nextTick, ref } from "vue"
+import { TreeNode } from "../store"
+import { TreeProps } from "../components/Tree.vue"
+
+type IUseExpandAnimationProps = Required<Pick<TreeProps, 
+'keyField' |
+'animation'
+>>
+
+export const useExpandAnimation = (renderNodesRef: Ref<TreeNode[]>, props: IUseExpandAnimationProps) => {
+ const expandAnimationStart = ref(false)
+ const expandAnimationReady = ref(false)
+ const expandNodeIndex = ref(-1)
+ const expandNodeLevel = ref(-1)
+ const expandNodeCurrentState = ref(false)
+ const expandNodeNextState = ref(false)
+
+ const expandTopNodes = ref<TreeNode[]>([])
+ const expandMiddleNodes = ref<TreeNode[]>([])
+ const expandBottomNodes = ref<TreeNode[]>([])
+
+ const resetExpandAnimation = () => {
+ expandAnimationStart.value = false
+ expandAnimationReady.value = false
+ expandNodeIndex.value = -1
+ expandNodeLevel.value = -1
+
+ expandTopNodes.value = []
+ expandMiddleNodes.value = []
+ expandBottomNodes.value = []
+ }
+
+ const updateMiddleNodes = () => {
+ const nodeToExpandLevel = expandNodeLevel.value
+ const middleNodes: TreeNode[] = []
+ const renderNodesLength = renderNodesRef.value.length
+ for (let i = expandNodeIndex.value + 1; i < renderNodesLength; i++) {
+ if (renderNodesRef.value[i]._level > nodeToExpandLevel) {
+ middleNodes.push(renderNodesRef.value[i])
+ } else break
+ }
+ expandMiddleNodes.value = middleNodes
+ }
+
+ const updateBeforeExpand = (nodeToExpand: TreeNode) => {
+ if (!props.animation) return
+ resetExpandAnimation()
+
+ const key = nodeToExpand[props.keyField]
+ const index = renderNodesRef.value.findIndex((renderNode) => renderNode[props.keyField] === key)
+ if (index > -1) {
+ expandNodeIndex.value = index
+ expandNodeLevel.value = nodeToExpand._level
+ expandAnimationStart.value = true
+ expandNodeCurrentState.value = nodeToExpand.expand
+ expandNodeNextState.value = !nodeToExpand.expand
+
+ if (expandNodeNextState.value) {
+ expandBottomNodes.value = renderNodesRef.value.slice(expandNodeIndex.value + 1)
+ } else {
+ updateMiddleNodes()
+ }
+ }
+ }
+
+ const updateAfterExpand = () => {
+ if (!props.animation) return
+
+ if (!expandAnimationStart.value) {
+ expandAnimationStart.value = false
+ return
+ }
+
+ if (expandNodeIndex.value === -1) return
+
+ nextTick(() => {
+ expandTopNodes.value = renderNodesRef.value.slice(0, expandNodeIndex.value + 1)
+ if (expandNodeNextState.value) {
+ updateMiddleNodes()
+ } else {
+ expandBottomNodes.value = renderNodesRef.value.slice(expandNodeIndex.value + 1)
+ }
+ expandAnimationReady.value = true
+ nextTick(() => {
+ expandNodeCurrentState.value = !expandNodeCurrentState.value
+ })
+ })
+ }
+
+ const onExpandAnimationFinish = () => {
+ resetExpandAnimation()
+ }
+
+ return {
+ ready: expandAnimationReady,
+ currentExpandState: expandNodeCurrentState,
+
+ topNodes: expandTopNodes,
+ middleNodes: expandMiddleNodes,
+ bottomNodes: expandBottomNodes,
+
+ updateBeforeExpand,
+ updateAfterExpand,
+ onExpandAnimationFinish,
+ }
+}

src/styles/tree-drop.less

@@ -145,7 +145,7 @@
 
  // Dropdown animation
  .@{tree-dropdown-prefix} {
- &-enter,
+ &-enter-from,
  &-leave-to {
  opacity: 0;
  transform: scaleY(0.8);

src/styles/tree.less

@@ -2,6 +2,7 @@
  // prefix
  @tree-prefix: ~'@{vtree-prefix}-tree';
  @tree-node-prefix: ~'@{tree-prefix}-node';
+ @tree-expand-animation: ~'@{vtree-prefix}-expand-animation';
 
  // Tree
  .@{tree-prefix} {
@@ -304,6 +305,25 @@
  }
  }
  }
+
+ .@{tree-expand-animation} {
+ &-enter-from,
+ &-leave-to {
+ opacity: 0;
+ grid-template-rows: 0fr;
+ }
+
+ &-enter-to,
+ &-leave-from {
+ opacity: 1;
+ grid-template-rows: 1fr;
+ }
+
+ &-enter-active,
+ &-leave-active {
+ transition: opacity .2s, grid-template-rows .2s;
+ }
+ }
 }
 
 #vtree-tree-styles();