展开/收缩 时动画效果
带动画的展开和折叠
演示在树形布局中展开或折叠节点子节点时的平滑动画过渡。
带动画的展开和折叠
功能概述
此示例演示在树形布局中展开或折叠子节点时的平滑动画过渡,在结构更改期间提供视觉反馈。
核心特性实现
动画展开/折叠
切换节点可见性时启用动画:
const graphOptions: RGOptions = {
layout: {
layoutName: 'tree',
reLayoutWhenExpandedOrCollapsed: true
}
};
切换节点展开
使用显示在父节点上的展开/折叠按钮:
// 内置展开/折叠功能
nodes: [
{ id: 'a', text: 'Parent', collapsed: false },
{ id: 'b', text: 'Child' }
]
创意使用场景
- 交互式组织架构图:平滑的部门展开
- 文件浏览器:动画文件夹导航
- 决策树:带有过渡的视觉分支
- 类别浏览器:可展开的产品类别
- 知识图谱:分层概念探索