如何動畫列表元素的位置變化

Question

所以我有一個LI添加了Javascript的Javascript，這些項目可以被刪除，如果有它下面的項目他們被提升，有沒有一種方法來動畫這個位置變化？我已嘗試應用

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>