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

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

您可以使用 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;
}

您可以根据您的要求更改保证金。

CSS 移动时的过渡

CSS Transition When Moved

html

css

transition