[CSS过渡时移动

Question

当第一个元素被删除时，我想让其他元素滑入它们的新位置，而不是立即去那里。使用下面的代码，当您删除第一个框时，所有其他框将立即移至其新位置。最终，会有很多行的盒子。

var pile = document.getElementById("pile");
function removeFirst(){
  pile.removeChild(event.target);
}

.box{
  border: 1px solid black;
  padding: 20px;
}
#pile{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

<div id="pile">
  <div class="box" onclick="removeFirst()">I'm the first box</div>
  <div class="box">I'm the second box</div>
  <div class="box">I'm the third box</div>
  <div class="box">I'm the fourth box</div>
</div>

Answer 1

var pile = document.getElementById("pile");
function removeFirst(thisDom){
    thisDom.style.transition = 'margin-left .3s'
    thisDom.style.opacity = 0
    thisDom.style.marginLeft = -thisDom.getBoundingClientRect().width + 'px'
    setTimeout(()=> {
        pile.removeChild(thisDom);
    }, 300)      
}

.box{
  border: 1px solid black;
  padding: 20px;
}
#pile{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

<div id="pile">
  <div class="box" onclick="removeFirst(this)">I'm the first box</div>
  <div class="box" onclick="removeFirst(this)">I'm the second box</div>
  <div class="box" onclick="removeFirst(this)">I'm the third box</div>
  <div class="box" onclick="removeFirst(this)">I'm the fourth box</div>
</div>

转换完成后删除dom

Answer 2

您可以使用CSS进行此操作。

尝试这个

#pile{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 144px;
    transition: padding-left 1s;
}
.box{
    border: 1px solid black;
    padding: 20px;
    transition: margin-left 1s;
}
.box:first-child{
    margin-left: -144px;
}

您可以根据需要更改边距。