javascript - 如何对现有列表项使用 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;
}

在这里 fiddle :http://fiddle.jshell.net/pcsj2mgb/

编辑:固定 fiddle :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>