CSS Transition When Moved

Question

When the first element gets deleted, I want to make the other elements to slide into their new places instead of going instantly there. Using the code below, all of the other boxes move instantly to their new positions when you delete the first one. Eventually, there will be many rows of boxes.

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>

Remove dom when the transition is complete

var rectArr = Array.from(document.getElementsByClassName('rect'));

var box = document.getElementById('box')
var delay = 300
box.addEventListener('click', function(e){
    if(e.target === box) return
    let index = e.target.getAttribute('data-index')

    var moveArr = rectArr.splice(index, rectArr.length)

    moveArr.forEach(item => {
        item.preLeft = item.offsetLeft
        item.preTop = item.offsetTop
    })

    box.removeChild(e.target)

    moveArr.forEach(item => {
        item.style.transform = `translate(${item.preLeft - item.offsetLeft}px,${item.preTop - item.offsetTop}px)`
    })
    setTimeout(() => {
        moveArr.forEach(item => {
            item.style.transition = `transform ${delay}ms ease`
            item.style.transform = `translate(0, 0)`
        })
    }, 1)

    setTimeout(() => {
      moveArr.forEach(item => {
        item.style.transition = ``
        item.style.transform = ''
      })  
    }, delay + 1)

    rectArr = [...rectArr, ...moveArr]
})

.box {
    width: 336px;
    height: 336px;
    box-shadow: 0 0 3px pink;
    list-style: none;
    padding: 0;
}
.rect {
    width: 50px;
    height: 50px;
    box-shadow: 0 0 3px orange inset;
    margin: 3px;
    float: left;
    cursor: pointer;
    line-height: 50px;
    text-align: center;
}

<ul class="box" id="box">
    <li class="rect" data-index="01">01</li>
    <li class="rect" data-index="02">02</li>
    <li class="rect" data-index="03">03</li>
    <li class="rect" data-index="04">04</li>
    <li class="rect" data-index="05">05</li>
    <li class="rect" data-index="06">06</li>
    <li class="rect" data-index="07">07</li>
    <li class="rect" data-index="08">08</li>
    <li class="rect" data-index="09">09</li>
    <li class="rect" data-index="10">10</li>
    <li class="rect" data-index="11">11</li>
    <li class="rect" data-index="12">12</li>
    <li class="rect" data-index="13">13</li>
    <li class="rect" data-index="14">14</li>
    <li class="rect" data-index="15">15</li>
    <li class="rect" data-index="16">16</li>
    <li class="rect" data-index="17">17</li>
    <li class="rect" data-index="18">18</li>
    <li class="rect" data-index="19">19</li>
    <li class="rect" data-index="20">20</li>
    <li class="rect" data-index="21">21</li>
    <li class="rect" data-index="22">22</li>
    <li class="rect" data-index="23">23</li>
    <li class="rect" data-index="24">24</li>
    <li class="rect" data-index="25">25</li>
    <li class="rect" data-index="26">26</li>
    <li class="rect" data-index="27">27</li>
    <li class="rect" data-index="28">28</li>
    <li class="rect" data-index="29">29</li>
    <li class="rect" data-index="30">30</li>
    <li class="rect" data-index="31">31</li>
    <li class="rect" data-index="32">32</li>
    <li class="rect" data-index="33">33</li>
    <li class="rect" data-index="34">34</li>
    <li class="rect" data-index="35">35</li>
    <li class="rect" data-index="36">36</li>
</ul>

Answer 2

You can do this using CSS.

Try this one

#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;
}

You can change margin according to your requirements.