动画与布局 (Layout & Animation)

当布局发生变化时（比如从垂直变为水平），直接瞬间跳转位置会给用户带来视觉上的割裂感。利用 Flow 的 DOM 高性能渲染特性，我们可以非常简单地通过 CSS 过渡来实现极致丝滑的布局动画。

布局动画示例

点击切换布局，观察节点是如何“游动”到新位置的。

Node 1

Node 2

Node 3

Node 4

带阻尼动画的布局

实现细节

1. 临时绑定：我们不推荐始终在节点上开启 transition: transform。这会导致用户在手动拖拽节点时，节点尝试由于过渡动画而产生“粘滞感”和“手感延迟”。
2. 逻辑开关：如上例所示，在触发布局算法前，通过父组件状态增加一个 .layout-animating 类名。
3. 连线路径动画：现代游览器（Chrome/Edge 等）已经支持对 SVG <path> 的 d 属性执行过过渡动画。如果路径点数量一致，连线也会非常自然地向新位置扭动。
4. 清理工作：在预估的动画周期结束后，移除该类名，恢复爽快的拖拽手感。