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


  I'm the first box
  I'm the second box
  I'm the third box
  I'm the fourth box

user_12598378 · Answer

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


  I'm the first box
  I'm the second box
  I'm the third box
  I'm the fourth box

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

user_11732088 · Answer

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.

CSS Transition When Moved

2 Answers