子元素使用translateX动画时实现父元素宽度平滑过渡的方案

嘿，我完全懂你遇到的糟心事——左侧菜单通过keyframes滑入滑出时，父容器的宽度直接跳变，加了transition也没效果，对吧？我之前做侧边栏的时候也踩过这个坑，问题根源其实在auto宽度和keyframes动画的组合上。

问题出在哪？ #

你给父容器加的transition: width没生效，主要有两个核心原因：

1. 菜单的keyframes动画里用了width: auto——transition无法计算auto到0的中间过渡值，浏览器只能直接跳变，没法生成平滑动画。
2. 父容器的宽度是由子元素自动撑开的，而keyframes动画是“帧动画”，不是连续的数值变化，父容器没法同步感知到平滑的宽度变化，自然也就没法过渡。

解决方案：用transition替代keyframes，给菜单设明确宽度 #

要让父容器宽度跟着平滑过渡，我们需要把菜单的动画从keyframes改成纯transition，并且给菜单设置明确的宽度值（不能用auto），这样父容器的宽度变化就能被transition捕捉到。

调整后的SCSS代码（贴合你原来的嵌套风格）

#LeftMenuContainer {
  /* 给菜单设置明确宽度，比如250px，按需调整 */
  width: 250px;
  /* 同时过渡transform和width属性，保持动画同步 */
  transition: transform 0.6s ease, width 0.6s ease;

  &.menu_hidden {
    transform: translateX(-100%);
    width: 0;
    /* 可选：隐藏溢出内容，避免菜单文字露出 */
    overflow: hidden;
  }

  &.menu_shown {
    transform: translateX(0);
    width: 250px;
  }
}

/* 父容器样式调整 */
#contentContainer {
  display: flex;
  /* 让父容器宽度自适应子元素总宽度 */
  width: fit-content;
  /* 给父容器的宽度添加过渡动画 */
  transition: width 0.6s ease;
}

你的DOM结构无需修改

<div id="contentContainer" class="flex">
  <app-left-menu></app-left-menu>
  <div>Be smooth!</div>
</div>

为什么这样就能生效？ #

• 菜单的宽度现在是明确的数值变化（250px ↔ 0），transition能准确计算每帧的中间值，实现平滑动画。
• 父容器用width: fit-content，会实时根据子元素的总宽度调整自身宽度，再加上transition: width，就能完美同步菜单的收缩/展开动画。
• 去掉keyframes后，菜单的动画和父容器的过渡完全在一个时序里，不会出现错位。

如果你的菜单宽度需要自适应内容，可以用width: max-content代替固定值，只要是明确的可计算宽度就行，别用auto~

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