如何实现按钮随可折叠div的折叠动画平滑滑动？

原有代码无法实现平滑效果的核心原因有两个：

• display: none 属于不可动画属性，元素应用该样式后会瞬间从渲染流中移除，完全无法参与过渡动画
• 外层容器的宽度变化没有配置transition过渡规则，属性变更会直接跳变，没有中间动画帧

不需要额外编写按钮位移动画，利用flex布局的特性配合可动画属性的过渡就能实现需求，具体修改如下：

• 废弃原来用display: none隐藏标题的逻辑，改为通过宽度、透明度收缩的方式隐藏标题，这类属性支持平滑过渡
• 给外层容器添加宽度过渡规则，让容器尺寸变化有平滑动画
• 给固定宽度的按钮和标题添加flex-shrink: 0，避免flex布局默认的收缩规则打乱动画节奏

完整修改后代码 #

JS部分 #

const collapse = () => {
  const title = document.getElementById('title');
  title.classList.add('collapsed');
  const out = document.getElementById('out');
  out.classList.add('collapse');
  // 如果需要点击切换展开/折叠状态，把上面两个classList.add替换为classList.toggle即可
}

CSS部分 #

.out {
  width: 200px;
  background-color: grey;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  /* 配置宽度过渡，时长0.3s，缓动效果自然不生硬，可按需调整时长 */
  transition: width 0.3s ease;
}

.out.collapse {
  width: 65px;
}

#title {
  /* 标题所有属性变化都跟随过渡 */
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 折叠态标题：宽度、透明度、边距全收为0，配合overflow:hidden实现平滑消失 */
#title.collapsed {
  width: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.btn {
  width: 65px;
  flex-shrink: 0;
}

HTML部分 #

原有结构不需要调整，直接复用即可：

<div id='out' class='out'>
  <span id='title'>Title</span>
  <button class='btn' onclick='collapse()'>Collapse</button>
</div>

实现效果：点击按钮后容器从200px宽度平滑收缩到65px，标题同步平滑收缩消失，按钮会随着容器尺寸变化、标题占位消失的过程自然平滑滑动到容器左端，全程没有跳变。

内容的提问来源于stack exchange，提问作者one-hand-octopus