動畫新創建的列表元素

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 。

演示。