Javascript 为新创建的列表元素设置动画

我正试图有添加的'李'标签动画时，入口，最好是通过使用CSS。向“显示”、“不透明度”和“全部”添加过渡并没有导致任何更改。代码如下：

    function addItem(item){
        item = document.getElementById('plan_submit').value;
        var listContainer = document.getElementById('list_container');
        listContainer.innerHTML += '<li class=list_item>' + item + '</li>';
    }

功能附加项（项）{
item=document.getElementById（'plan_submit'）。值；
var listContainer=document.getElementById（'list_container'）；
listContainer.innerHTML+='
'+item+'
'；
}

---

谢谢：）

您可以这样做：

function addItem(text){
   var item = document.createElement('li');
   item.innerHTML = text;
   item.className = 'list_item';     
   var listContainer = document.getElementById('list_container');
   listContainer.appendChild(item);
   item.style.opacity = 0;     
   setTimeout(function(){ item.style.opacity = 1}, 1);
}

CSS：

.list_item {    
  transition:opacity 1s;    
}

在这种情况下，使用

setTimeout

非常重要（即使延迟仅为

1

ms）。还请注意，实际上不需要使用class

.list\u项

，因为您可以使用脚本为新添加的

li

设置

转换

---

谢谢，非常感谢。因此，我猜appendChild将替换+=内部HTML？@Jking是的，但是使用

appendChild

允许我们更改新添加元素的一些属性，正如您可以看到的，我们将

opacity

更改为

0

，然后将

opacity

更改为

1

以设置动画（因为我们使用CSS转换）。重要的是我们必须使用

setTimeout

，否则就不会有任何转换。那么setTimeout持续时间应该等于转换持续时间吗？感谢您提供的所有帮助，还有一件事。请您解释一下setTimeout行，以及为什么在末尾有两个函数和括号中的项目？没关系。谢谢你的帮助。