JavaScript is required

展开/收缩 时动画效果

带动画的展开和折叠

演示在树形布局中展开或折叠节点子节点时的平滑动画过渡。

带动画的展开和折叠

功能概述

此示例演示在树形布局中展开或折叠子节点时的平滑动画过渡,在结构更改期间提供视觉反馈。

核心特性实现

动画展开/折叠

切换节点可见性时启用动画:

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'tree',
        reLayoutWhenExpandedOrCollapsed: true
    }
};

切换节点展开

使用显示在父节点上的展开/折叠按钮:

// 内置展开/折叠功能
nodes: [
    { id: 'a', text: 'Parent', collapsed: false },
    { id: 'b', text: 'Child' }
]

创意使用场景

  • 交互式组织架构图:平滑的部门展开
  • 文件浏览器:动画文件夹导航
  • 决策树:带有过渡的视觉分支
  • 类别浏览器:可展开的产品类别
  • 知识图谱:分层概念探索