Question

我正在尝试添加＆＃39; li＆＃39;在入口处动画的标签，最好是使用CSS。添加过渡到＆＃39;显示＆＃39;，＆＃39;不透明度＆＃39;以及＆＃39;所有＆＃39;没有导致任何变化。这是代码：

    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并不是必需的，因为您可以使用脚本为新添加的transition设置li。

动画新创建的列表元素

1 个答案:

Demo.