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

假设我有以下HTML：

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

在这里拉小提琴：

---

编辑：修复小提琴：

我对您的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)

}

您可以看到这个示例中我的小提琴链接：

可以使用CSS来完成，不过您需要定义

li

元素的最终高度，以便可以将设置为该高度的动画

当然，您需要将

newItem

类添加到要添加的元素中，因此CSS会影响它

更新：无需定义最终高度！让我们‘只需设置

最大高度的动画即可

。更新了代码段

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{
最大高度：0；
不透明度：0；
动画：成长1秒，快进快出向前；
-webkit动画：成长1秒轻松进退向前；
}
@-webkit关键帧增长{
到{
最大高度：20px；
不透明度：1；
}
}
@关键帧增长{
到{
最大高度：20px；
不透明度：1；
}
}

一,
二,
三,
永远是终点

添加

通过Javascript添加CSS值有点麻烦

我已经找到了一种方法，通过使用仅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}
}

完整解决方案：

---

设置超时并不是最好的解决方案。10毫秒对我都不起作用。我不得不将它提升到100毫秒，然后它就工作了。所以我不能通过纯CSS来实现这一点？你手头的javascript确实是错误的。您正在将一个子节点附加到最后一个项。它应该像下面的hitesh所做的那样：附加到第二个最后一项的

parentNode

。尽管它可以是

lastItem.parentNode.insertBefore（newItem，lastItem）

，但如果要获取最后一项而不是最后一项，则跳过使用

nextSibling

。@Sevanteri好的，我在这里做了更改：但是动画仍然不起作用。我不明白为什么这个问题被忽略了。你意识到你的“AlwaysAtTheEnd”列表项在演示中的任何位置都没有移动吗？你在使用什么浏览器？在Firefox上，它运行得很好。明白了，我很同情你。此外，投票表决；但我认为“同理心”是关键

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)

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