javascript - 如何使用 inline-block 使 div 缓慢移动

Question

当单击 blueBoxId div 时，我试图删除 div redBoxId。在 css 方面，我将 inline-block 作为属性，因为它会自动将自身置于父 div 的中心。但是，我想添加一个效果(转换??)，当 redBoxId 被删除时，blueBoxId 缓慢/平滑 移动而不是快速移动(同时将内联 block 保留为 css 属性)。

document.getElementById('blueBoxId').addEventListener('click', function() {
  document.getElementById('blueBoxId').style.transition = "all 2s ease-in-out";
  document.getElementById('redBoxId').remove();
})

#redBoxId {
  background-color: red;
  width: 100px;
  height: 100px;
  display: inline-block;
}

#blueBoxId {
  background-color: blue;
  width: 100px;
  height: 100px;
  display: inline-block;
}

<div class="redBlueBox">
  <div id="redBoxId">hi</div>
  <div id="blueBoxId">hi</div>
</div>

Answer 1

在 css 中添加 transition 并且您不能在 remove 上应用过渡，缩小宽度和/或不透明度，然后在动画结束后删除该元素，

document.getElementById('blueBoxId').addEventListener('click', function(){
    
    document.getElementById('redBoxId').style.width = 0;
    document.getElementById('redBoxId').style.opacity = 0;
    
    /*
    * optional if you want remove the DOM and not just hide it
    *
     setTimeout(function(){
       document.getElementById('redBoxId').remove();
     }, 1000);
    */
})

#redBoxId{
  background-color: red;
  width: 100px;
  height: 100px;
  display: inline-block;
  transition: all 1s linear;
}

#blueBoxId{
  background-color: blue;
  width: 100px;
  height: 100px;
  display: inline-block;
}

<div class="redBlueBox">
   <div id="redBoxId">hi</div>
   <div id="blueBoxId">hi</div>
</div>