當兄弟被刪除時，如何讓HTML div動畫變得平滑過渡？

我正在處理我的頁面上的CSS/JS動畫。

的HTML

<div class="container"> 
    <div class="mock-requests"> 
    <div class="mock-request"> 
     <div class="mock-request-inner"> 
     </div> 
     <small>Box 1</small> 
    </div> 

    <div class="mock-request"> 
     <div class="mock-request-inner"> 
     </div> 
     <small>Box 2</small> 
    </div> 

    <div class="mock-request"> 
     <div class="mock-request-inner"> 
     </div> 
     <small>Box 3</small>  
    </div> 

    <div class="mock-request"> 
     <div class="mock-request-inner"> 
     </div> 
     <small>Box 4</small>  
    </div> 

    <div class="mock-request"> 
     <div class="mock-request-inner"> 
     </div> 
     <small>Box 5</small> 
    </div> 
    </div> 
</div>

的JS

var mockRequests; 

mockRequests = (function() { 
    var animationStep0, animationStep1, animationStep2, callNextStep, init, itemHeight, startTimer, step, timeDelay, timer; 
    timer = null; 
    step = 0; 
    timeDelay = 1600; 
    itemHeight = 0; 
    init = function() { 
    if (document.querySelector('.mock-request')) { 
     $(".mock-request").addClass('animated'); 
     itemHeight = $('.mock-request:first').css('height'); 
     return startTimer(); 
    } 
    }; 
    startTimer = function() { 
    return timer = setInterval(callNextStep, timeDelay); 
    }; 
    animationStep0 = function() { 
    $('.mock-request:first').addClass('checked'); 
    return step += 1; 
    }; 
    animationStep1 = function() { 
    $('.mock-request:first').addClass('zoomOutLeft'); 
    return step += 1; 
    }; 
    animationStep2 = function() { 
    console.log("Setting item height: " + itemHeight); 
    $('.mock-request.checked').removeClass('checked zoomOutLeft').remove().css({ 
     "height": itemHeight 
    }).appendTo('.mock-requests').addClass('zoomInBottom'); 
    return step = 0; 
    }; 
    callNextStep = function() { 
    return eval("animationStep" + step + "()"); 
    }; 
    return { 
    init: init 
    }; 
})(); 

$(document).on("turbolinks:load", mockRequests.init);

的CSS

@charset "UTF-8"; 
body { 
    font-size: 16px; 
    color: white; 
} 
small { 
    position: absolute; 
    top: 1.8rem; 
    left: 1rem; 
    font-size: 0.5rem; 
} 
.mock-request { 
    position: relative; 
    height: 3rem; 
    border-color: white; 
    border-width: 3px; 
    border-style: solid; 
    border-radius: 4px; 
    width: 100%; 
    max-width: 320px; 
    margin: 1rem auto; 
} 
.mock-request:before { 
    position: absolute; 
    top: 0.6rem; 
    right: 1rem; 
    font-size: 1.2rem; 
    color: white; 
    font-family: "FontAwesome"; 
    content: "\f10c"; 
} 
.mock-request.checked:before { 
    content: "\f058"; 
} 

.mock-request-inner { 
    position: absolute; 
    top: 1rem; 
    left: 1rem; 
    height: 0; 
    width: 80%; 
    border-color: white; 
    border-width: 3px; 
    border-style: solid; 
    border-radius: 4px; 
} 
.container { 
    background-color: black; 
}

我想重新創建的效果類似於iOS上的滑動刪除效果。我希望它看起來像堆棧中的元素正在被檢查，然後向左滑動以擺脫它。

一旦物品被移除，堆棧應該優雅地向上滑動以代替先前的第一項。

該序列應該連續循環。

爲了提高效率，我從堆疊中取出第一件物品，並將其重新附加到堆疊的底部。

問題：

目前，有一次我從棧中刪除頂部的元素，他們的休息跳起來拿前面兄弟的地方。我希望這種過渡發生緩慢（〜0.8s），而不是立即發生，因爲現在正在進行。

有人可以建議一個優雅的方式來完成這個序列？

謝謝！

來源

2017-10-07 bodacious

我一直在看你的有趣的問題，我想我有一個答案，jQuery的動畫，你可以在這裏看到引用 - http://api.jquery.com/animate/

原因您的問題是，根據您的CSS的位置，直到項目被刪除，它佔用了該內容，因此當它被刪除時，另一個div會自動佔用空間。

因此，我可以看到的最好方法是修改被刪除的div的高度。我添加了另一個案例陳述來實現這一點。「殼體2： $（」 .mock鬆請求：第一「）.animate（{ 」高度「：」0像素「}，」慢「）; 返回步驟+ = 1; 」

因此，在降低其高度時，下面的div會顯示順利滾動。「緩慢」的使用只是我的遊戲引擎建設日的最愛，但正如API文檔所述，您可以指定毫秒

不幸的是，jSFiddle不包含正確的jQuery版本，示例顯示我的工作示例，但是我已經能夠在本地文件上按預期工作。

來源

2017-10-08 00:38:27

當兄弟被刪除時，如何讓HTML div動畫變得平滑過渡？

回答

相關問題