如何对现有列表项使用 CSS 转换来为新列表项腾出空间？

Question

假设我有以下 HTML：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>AlwaysAtTheEnd</li>
</ul>

在列表项 3 之后，我将使用 javascript 插入列表项 4。发生这种情况后，HTML 将如下所示：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>AlwaysAtTheEnd</li>
</ul>

但是，我希望“AlwaysAtTheEnd”项目能够平滑地向下滑动以为新项目腾出空间，而不是立即弹出来腾出空间。

我尝试简单地添加以下 CSS，但它似乎没有任何影响：

li {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

在这里小提琴： http: //fiddle.jshell.net/pcsj2mgb/

编辑：固定小提琴：http://fiddle.jshell.net/pcsj2mgb/1/

Answer 1

可以使用 CSS 来完成，但您需要定义li元素的最终高度，以便可以将动画设置到该高度。

当然，您需要将newItem类添加到要附加的元素中，以便 CSS 影响它。

更新：无需定义最终高度！让我们来制作动画max-height。更新了片段。

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

  newItem.classList.add("newItem");

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

.newItem {
  max-height: 0;
  opacity: 0;
  animation: grow 1s ease-in-out forwards;
  -webkit-animation: grow 1s ease-in-out forwards;
}
@-webkit-keyframes grow {
  to {
    max-height: 20px;
    opacity: 1;
  }
}
@keyframes grow {
  to {
    max-height: 20px;
    opacity: 1;
  }
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>AlwaysAtTheEnd</li>
</ul>
<button onClick="add()">Add</button>