使用CSSTransition实现宽度动画时相邻元素未同步调整

嘿，这个问题我之前也碰到过！本质上是浏览器处理width: auto元素过渡时的重排机制导致的——当兄弟元素消失时，浏览器不会实时计算按钮的动态宽度，而是要等过渡结束后才会更新。下面给你几个实用的解决办法：

1. 给按钮加固定宽度的过渡，先锁宽再过渡 #

默认情况下，width: auto的元素没法触发平滑的宽度变化，因为浏览器算不出"自动宽度"到新宽度的中间值。我们可以先把按钮的当前宽度固定下来，再让兄弟元素消失，这样浏览器就能基于固定值做平滑过渡了：

首先给按钮加过渡样式：

.button {
  /* 精准指定要过渡的属性，避免不必要的性能消耗 */
  transition: width 0.3s ease, opacity 0.3s ease;
  /* 可选：加个最小宽度，防止按钮缩得太窄 */
  min-width: 80px;
}

然后在点击事件里做这些操作：

const declineBtn = document.querySelector('.decline-btn');
const nextBtn = document.querySelector('.next-btn');

declineBtn.addEventListener('click', () => {
  // 先获取按钮当前的实际宽度，把它设为固定值
  const currentWidth = declineBtn.offsetWidth;
  declineBtn.style.width = `${currentWidth}px`;
  
  // 这里加一行空的offsetWidth读取，强制浏览器立即重排，确保固定宽度生效
  void declineBtn.offsetWidth;
  
  // 让下一个按钮逐渐消失（用opacity+width收缩，别用display:none）
  nextBtn.style.opacity = '0';
  nextBtn.style.width = '0';
  nextBtn.style.pointerEvents = 'none'; // 防止消失后还能被点击
  
  // 过渡结束后，再把按钮的宽度改回auto，保证后续布局正常
  setTimeout(() => {
    declineBtn.style.width = 'auto';
  }, 300); // 这个时间要和CSS里的过渡时长一致
});

2. 用Flex布局的弹性扩展来实现 #

如果你的按钮是放在Flex容器里，那直接用flex-grow属性会更简单——让被点击的按钮在兄弟元素消失时，平滑填充剩余空间：

先设置Flex容器和按钮的样式：

.button-container {
  display: flex;
  gap: 8px; /* 按钮之间的间距 */
}

.button {
  flex-grow: 0; /* 默认不扩展 */
  transition: flex-grow 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}

/* 点击后添加这个类，让按钮扩展 */
.button.fill-space {
  flex-grow: 1;
}

然后点击事件里只需要加类+隐藏兄弟按钮：

declineBtn.addEventListener('click', () => {
  nextBtn.style.opacity = '0';
  nextBtn.style.width = '0';
  declineBtn.classList.add('fill-space');
});

3. 别用display: none隐藏按钮！ #

如果你之前是用display: none来隐藏下一个按钮，那肯定会出问题——这个属性会让浏览器立即把元素从布局里移除，根本没法触发平滑过渡。一定要用opacity: 0 + width: 0 + pointer-events: none的组合，让元素慢慢收缩消失，这样当前按钮的宽度才能实时计算。

这几个方法里，我个人更推荐第二种Flex的方案，代码更简洁，也更符合现代布局的思路。你可以试试哪个更适配你的Demo场景～

内容的提问来源于stack exchange，提问作者Jan Ciołek