Question

我在点击redBoxId div时尝试删除div blueBoxId。在CSS方面，我将inline-block作为属性，因为它自动将其自身居中于父div。但是，我想添加一个效果（转换??），当移除redBoxId时，blueBoxId 缓慢/平滑移动而不是快速移动（同时保持内联 - 阻止作为css属性）。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

在transition中添加css，您无法在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>

Answer 2

我首先使用可见性删除红色框，然后将其宽度设置为0.现在，蓝框不动画，动画/过渡在红色框上随着宽度减小，但因为可见性是隐藏所以你不能看到它。

我将转换时间设置为0.5秒，您可以将其编辑为您想要的任何内容。另一个答案也有效，我只是给你另一个转换选项。

此方法使用css类而不是在js中执行css。

您还可以将课程添加与其他答案的css结合起来以实现相同的目标

＆＃13;

document.getElementById('blueBoxId').addEventListener('click', function() {
  document.getElementById('redBoxId').classList.add("remove");
});

＆＃13;

#redBoxId {
  background-color: red;
  width: 100px;
  height: 100px;
  display: inline-block;
  transition: width 0.5s;
  overflow: hidden;
  vertical-align: top;
}

#blueBoxId {
  background-color: blue;
  width: 100px;
  height: 100px;
  display: inline-block;
  vertical-align: top;
}

#redBoxId.remove {
  visibility: hidden;
  width: 0;
}

＆＃13;

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

＆＃13;

Answer 3

这是我最终提出的。因为我不希望在红色框上有淡化效果，并希望它在点击时立即消失：

document.getElementById('blueBoxId').addEventListener('click', function(){

  //added white background//
  document.getElementById('redBoxId').style.background = "white"; 

  setTimeout(function(){
    document.getElementById('redBoxId').style.transition = "0.5s"
    document.getElementById('redBoxId').style.width = 0;
  }, 100);

 //remove the div from the dom//
  setTimeout(function(){
    document.getElementById('redBoxId').remove();
  }, 1000);
})

的CSS：

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

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

如何使用内联块缓慢移动div

3 个答案: