javascript - 如何动画列表元素位置变化

Question

所以我有一个用 Javascript 添加的带有 li 的 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>