如何保留inline-block属性实现div点击移除后另一div平滑移动

没问题，我来帮你搞定这个需求！核心思路是不要直接移除redBox——因为直接移除会让blueBox瞬间跳到居中位置，而是先通过CSS过渡让redBox“平滑消失”，等过渡完成后再真正移除它，这样blueBox就会跟着慢慢移动，同时完全保留inline-block的居中特性。

完整代码示例 #

HTML

<div class="container">
  <div id="redBoxId" class="box red"></div>
  <div id="blueBoxId" class="box blue"></div>
</div>

CSS

.container {
  text-align: center; /* 维持inline-block元素的居中特性 */
  margin: 20px;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 0 5px;
  transition: all 0.5s ease; /* 给所有属性变化添加过渡动画 */
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
  cursor: pointer; /* 提示可点击 */
}

/* 用于让redBox平滑消失的类 */
.hidden {
  width: 0;
  margin: 0; /* 移除左右margin，避免残留空间 */
  opacity: 0;
  overflow: hidden; /* 防止redBox内的内容溢出显示 */
}

JavaScript

const blueBox = document.getElementById('blueBoxId');
const redBox = document.getElementById('redBoxId');

blueBox.addEventListener('click', function() {
  // 第一步：添加hidden类，触发redBox的平滑收缩/消失动画
  redBox.classList.add('hidden');
  
  // 第二步：等过渡动画完成后，再真正移除redBox
  // 这里的500ms要和CSS里transition的时长保持一致
  setTimeout(() => {
    redBox.remove();
  }, 500);
});

为什么这么做？ #

1. 保留inline-block居中：父容器的text-align: center依然生效，blueBox会随着redBox的收缩自动调整位置，完全符合你原本的布局需求。
2. 平滑过渡的关键：直接移除redBox会让浏览器瞬间重排布局，导致blueBox跳变。而先让redBox的宽度、透明度平滑变化，浏览器会在过渡过程中逐步计算布局，blueBox也就会跟着缓慢移动了。
3. 过渡完成后移除元素：用setTimeout等待过渡结束再移除redBox，避免过渡过程中元素被提前删除导致动画中断。

小提示 #

• 如果redBox内部有内容，一定要加上overflow: hidden，否则内容可能会在收缩时跑到外面来。
• 可以根据需求调整transition的时长（比如把0.5s改成0.3s更快，或者1s更慢），记得同步修改setTimeout的时间。

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