如何为按钮宽度变更添加动画，实现匹配父元素时的指定动效

核心实现思路 #

直接给按钮设置width: auto或width: 100%时，过渡动画往往不生效。常用的解决方案是借助**max-width属性**模拟宽度变化，配合CSS transition实现平滑过渡效果，完美匹配你示例中的动画表现。

完整代码示例 #

HTML结构 #

<div class="btn-wrapper">
  <button class="anim-btn">Hover to expand</button>
</div>

CSS样式 #

.btn-wrapper {
  width: 320px; /* 父容器宽度，可按需调整 */
  padding: 12px;
  background-color: #f5f5f5;
}

.anim-btn {
  padding: 8px 18px;
  border: none;
  border-radius: 6px;
  background-color: #3b82f6;
  color: #fff;
  cursor: pointer;
  /* 初始宽度匹配按钮自身内容 */
  max-width: fit-content;
  /* 给max-width添加过渡动画 */
  transition: max-width 0.3s ease;
}

/* hover时扩展至父容器宽度 */
.anim-btn:hover {
  max-width: 100%;
}

关键细节说明 #

• 用max-width替代width：width: auto无法触发过渡动画，而max-width能在固定值之间平滑过渡，完美模拟按钮从内容宽度扩展到父容器宽度的效果。
• 自定义动画参数：transition: max-width 0.3s ease里的0.3s是动画时长，ease是缓动曲线，你可以换成linear（匀速）、ease-in-out（慢进慢出）等。
• 点击触发的适配：如果需要点击触发动画而非hover，只需把:hover替换为自定义类（比如.expanded），再通过JS控制类的添加/移除：

const btn = document.querySelector('.anim-btn');
btn.addEventListener('click', () => btn.classList.toggle('expanded'));

对应的CSS修改：

.anim-btn.expanded {
  max-width: 100%;
}

内容的提问来源于stack exchange，提问作者a.badawi