Tree树形组件展开节点动画卡顿怎么办？

Good“丽红提问于 2026-01-30 14:02:30 阅读 33

组件

在用Ant Design的Tree组件做导航时，发现展开子节点的动画特别卡顿，明明加了transition属性也没用。

代码是这样写的：



  



.ant-tree-treenode-expanded .ant-tree-node-content-wrapper {
  transition: height 0.3s ease;
}

试过给展开容器加高度过渡，调整滚动渲染方式，但动画效果还是生硬卡顿，不知道哪里出问题了？

Tree树形导航组件

我来解答赞 4 收藏

反馈

1 条解答

シ一诺 Lv1

transition: height 这种方式确实容易导致卡顿，因为高度是不可预测的值，浏览器很难平滑计算中间状态。尤其是树形结构这种复杂场景，性能问题更明显。

建议改用 max-height 配合过渡动画，这样浏览器可以更好地预估变化范围。试试下面这个写法：

.ant-tree-treenode-expanded .ant-tree-child-tree {

  max-height: 1000px;

  transition: max-height 0.3s ease;

}



.ant-tree-treenode .ant-tree-child-tree {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.3s ease;

}

这种方式比直接操作 height 性能好很多。不过要注意，max-height 的值要足够大，但也不能太大，否则可能影响性能。

另外，如果节点特别多，还是建议分片渲染或者虚拟滚动，光靠 CSS 动画可能扛不住。毕竟 Tree 组件展开时 DOM 节点会成倍增加，浏览器压力不小。

如果你用了 GPU 加速（比如加了 transform 或 will-change），记得测试一下兼容性，有些低端设备可能会适得其反。

2026-01-31 12:04