如何为列表元素位置更改设置动画

Question

所以我有一个带有javascript的ul的ul，这些项目可以删除，如果下面有项目，他们会向上移动，有没有办法动画这个位置变化？我试过申请

transition: top 0.2s linear;

在列表项上，但似乎无效。

Answer 1

从DOM中删除元素不能像这样动画。你可能需要设置大小的动画或者淡出它们。它不像动画位置那么简单。

在Jquery中，您可以使用.slideUp为隐藏设置动画，然后使用.remove从DOM中提取它们。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;