MUI Dialog组件内容变化时能否实现高度平滑过渡动画？

问题场景 #

• Dialog 首次加载时仅渲染初始内容
• 后续通过异步请求、懒加载等方式追加内容时，对话框高度直接跳变，无平滑过渡效果
• 官方组件未提供对应配置项直接开启该效果

可行实现方式 #

1. 给 DialogContent 绑定原生高度过渡逻辑 #

该方式适配所有内容变化场景，不管是整块内容替换还是增量追加都能生效。
首先给内容容器添加基础过渡样式：

.smooth-dialog-content {
  transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

上述缓动函数和时长和MUI默认动画参数保持一致，交互风格更统一

在组件中通过ref绑定内容容器，监听内容变化触发高度过渡，核心逻辑：

const contentRef = useRef(null);

useEffect(() => {
  const contentEl = contentRef.current;
  if (!contentEl) return;
  // 先锁定当前实际高度
  contentEl.style.height = `${contentEl.offsetHeight}px`;

  requestAnimationFrame(() => {
    // 下一帧更新为内容加载后的实际高度，触发过渡
    contentEl.style.height = `${contentEl.scrollHeight}px`;
    // 过渡完成后把height还原为auto，适配窗口resize、内容后续变动场景
    const handleTransitionEnd = () => {
      contentEl.style.height = 'auto';
      contentEl.removeEventListener('transitionend', handleTransitionEnd);
    };
    contentEl.addEventListener('transitionend', handleTransitionEnd);
  });
}, [dialogContent]); // 依赖项传入Dialog的内容状态，内容变化时自动执行

使用时直接把ref和样式类挂到DialogContent组件上即可。

2. 局部动态内容用内置Collapse组件包裹 #

如果只是Dialog内部某一块内容动态显示/加载，不需要整个内容区做过渡，直接用MUI自带的Collapse过渡组件包裹动态块即可，无需手动计算高度，代码更简洁：

<DialogContent>
  <div>固定展示的基础内容</div>
  <Collapse in={isDynamicContentReady}>
    <div>异步加载的动态内容块</div>
  </Collapse>
</DialogContent>

注意事项 #

• 不要给Dialog根组件、DialogPaper组件加高度过渡，会干扰组件默认的打开/关闭动画
• 如果动态内容包含图片、视频等异步加载资源，要等资源加载完成后再触发高度计算，避免高度取值错误导致动画异常
• 如果Dialog设置了maxWidth和固定fullWidth属性，上述方案无需额外适配即可正常生效

内容的提问来源于stack exchange，提问作者Big boy