Как изменить размер позиции элемента списка

Question

Итак, у меня есть ul с li, которые добавляются с помощью 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>