当另一个元素更改布局时，如何以动画方式重新定位 DOM？

Question

我有一个无序列表，其中包含列表项。列表项垂直居中。我有一个按钮，可以将新列表项添加到无序列表中。看起来像这样：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

ul {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

如您所见，高度固定为 300px，这超出了所有项目所需的空间。当我向列表添加节点时，列表项会向上“传送”，以便为新添加的元素腾出位置。项目上升是有道理的，如果没有上升，它就不再居中了。但我希望有某种动画。可以用 CSS 做到这一点吗？我尝试了动画，但它不起作用：/

Answer 1

我不知道如何在示例中添加元素，但如果您向所有新项目添加一个类

 newItem.classList.add("newItem");

，那么您可以向该类添加动画。这是一个糟糕的例子，我更改了颜色、大小并旋转了新项目。

add = function() {
  listItems = document.getElementsByTagName('li');
  var lastItem = listItems[listItems.length - 1]
  var newItem = document.createElement('li');
  newItem.innerHTML = "New item";

  newItem.classList.add("newItem");

  lastItem.parentNode.insertBefore(newItem, lastItem);
}

.newItem {
  max-height: 0;
  opacity: 0;
   color:black;
   font-size:10px;
  -webkit-animation: grow 1s ease-in-out forwards;
}
@-webkit-keyframes grow {
  to {
    max-height: 20px;
    opacity: 1;
    color:blue;
    font-size:20px;
    rotate:20deg;
  }
}

<button onClick="add()">Add</button>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>