动画新创建的列表元素

Animate Newly Created List Element

本文关键字：列表元素 创建 新创建 动画      更新时间：2023-09-26

我试图有添加的'li'标签是动画入口，最好是通过使用CSS。向"display"、"opacity"answers"all"添加过渡效果不会导致任何变化。下面是代码:

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

谢谢:)

你可以这样做:

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。

演示。

相关文章：