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

How to use CSS transition for existing list items to make room for new ones?

本文关键字：列表 新列表 空间 CSS 转换      更新时间：2023-11-08

假设我有以下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>

然而，我希望"AlwaysAtEnd"项目能够平稳地向下滑动，为新项目腾出空间，而不是立即弹出以腾出空间。

我试着简单地添加以下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 here：http://fiddle.jshell.net/pcsj2mgb/

编辑：固定小提琴：http://fiddle.jshell.net/pcsj2mgb/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>

我更改了您的javascript代码：

add = function(){
    var listItems = document.getElementsByTagName('li');
    var secondLastItem = listItems[listItems.length - 2];
    var newItem = document.createElement('li');
    newItem.innerText = 4;
    // some pre defined css to new item
    newItem.style.height = '0px';
    newItem.style['opacity'] = '0';
    // This is change : because you are appending li into second last li, not in ul : so this function will insert li after last second item 
    secondLastItem.parentNode.insertBefore(newItem, secondLastItem.nextSibling);
    setTimeout(function(){
        // after append new item will get some css changes
        newItem.style.height = '18px';
        newItem.style['opacity'] = '1';
    },10)

}

你可以看到这个例子的fiddle链接：http://fiddle.jshell.net/13gg7kwf/

通过Javascript添加CSS值有点麻烦。

我已经找到了一种通过使用仅CSS的解决方案来实现这一点的方法（感谢：http://christianheilmann.com/2013/09/19/quicky-fading-in-a-newly-created-element-using-css/)。

不应该使用"过渡"，而应该使用"动画"。

创建一个CSS类，并通过JS添加它，在元素添加到DOM:后立即触发动画

li.fade {
    -webkit-animation: fade 5s;
    animation: fade 5s;
    opacity: 1;
}
/* -fail- */
@-webkit-keyframes fade {
from {opacity: 0}
to {opacity: 1}
}@keyframes fade {
from {opacity: 0}
to {opacity: 1}
}

完整的解决方案：http://jsfiddle.net/8wdk63ce/

相关文章：