リストアイテムが削除されたときのスライド遷移

Question

最後にCSSを使用して以来、しばらくお待ちください。私はこの問題を抱えています。私はアイテムのリストを持っています。十字をクリックすると、アイテムがDOMから削除されます。しかし、私が探しているのは、のアイテムの残りの部分をスライドさせて、を取り除いたときです。

現在、アイテムは必要に応じて削除されますが、すぐに他のアイテムを「スペースを埋める」ように移動します。このよう

var remove = function(id) { 
 
    document.querySelector('#'+id).remove(); 
 
}

div { 
 
    border: 1px solid grey; 
 
    width: 100px; 
 
    margin: auto; 
 
    margin-bottom: 10px; 
 
    text-align: center; 
 
    padding: 10px 
 
} 
 
span { 
 
    float: right; 
 
    cursor: pointer; 
 
}

<div id="one">One <span onclick="remove('one')">×</span></div> 
 
<div id="two">Two <span onclick="remove('two')">×</span></div> 
 
<div id="three">Three <span onclick="remove('three')">×</span></div> 
 
<div id="four">Four <span onclick="remove('four')">×</span></div>

Answer 1

...私はCSSトランジションでそれを行う方法がある知っているが、どのように質問はありますか？

私はと呼ばれるクラスを追加しました。このクラスは、要素をアニメーション化してスライドアップします。トランジションの後、タイマーを設定することで削除されます。

視覚的には、overflow:hiddenをターゲットスタイルに追加しました。代替方法として、elem.style.overflow = 'hidden'を使用してJS経由で追加することもできます。しかし、正当化のために、クローズアニメーションを開始するときに起こりうる不安を避けたいので、それをターゲットスタイルに追加しました。

var remove = function(id) { 
 
    var elem = document.querySelector('#'+id); 
 
    elem.className += 'closeSlide'; 
 
    setTimeout(function(){ 
 
    elem.remove(); 
 
    }, 200); 
 
}

div { 
 
    border: 1px solid grey; 
 
    width: 100px; 
 
    margin: auto; 
 
    margin-bottom: 10px; 
 
    text-align: center; 
 
    padding: 10px; 
 
    overflow:hidden; 
 
} 
 
span { 
 
    float: right; 
 
    cursor: pointer; 
 
} 
 
.closeSlide { 
 
    margin-bottom:0; 
 
    height:0px; 
 
    padding-top:0; 
 
    padding-bottom:0; 
 
    transition: 0.2s all ease-out; 
 
    /*Just reverse any spacing styling you've applied to make it **magically** disappear*/ 
 
}

<div id="one">One <span onclick="remove('one')">×</span></div> 
 
<div id="two">Two <span onclick="remove('two')">×</span></div> 
 
<div id="three">Three <span onclick="remove('three')">×</span></div> 
 
<div id="four">Four <span onclick="remove('four')">×</span></div>