リスト要素位置の変更をアニメートする方法

Question

Javascriptで追加されたulを持つulがあります。これらの項目は削除できます。その下に項目がある場合は、この位置の変更をアニメーション表示する方法があります？私は適用しようとしました

transition: top 0.2s linear; 

リストの項目では動作していないようです。

Answer 1

DOMからの要素の削除は、そのままアニメーション化することはできません。あなたは、サイズをアニメーション化したり、おそらくそれらを消し去らなければなりません。位置をアニメーション表示するほど簡単ではありません。

Jqueryでは、.slideUpを使用して非表示にすることができ、.removeをDOMから抽出することができます。

$(document).ready(function() { 
 
    $("li").click(function() { 
 
    $(this).slideUp("normal", function() { 
 
     $(this).remove(); 
 
    }); 
 
    }); 
 
});

ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 1em; 
 
} 
 
li { 
 
    padding: 1em; 
 
    border: 1px solid grey; 
 
    margin-bottom: .5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>List item 1</li> 
 
    <li>List item 2</li> 
 
    <li>List item 3</li> 
 
    <li>List item 4</li> 
 
    <li>List item 5</li> 
 
</ul>