动画新创建的列表元素

Question

我正在尝试使添加的“ li”标签在进入时进行动画处理，最好使用CSS。 向“显示”，“不透明度”和“全部”添加过渡效果并未导致任何更改。 这是代码：

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

谢谢 ：）

Answer 1

您可以执行以下操作：

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）。 还要注意，实际上不需要使用类.list_item因为您可以使用脚本为新添加的li设置transition 。

演示。