Animate Newly Created List Element

Question

I am trying to have the added 'li' tags to be animated upon entrance, preferably by using CSS. Adding transitions to 'display', 'opacity', and 'all' have not resulted in any change. Here's the code:

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

Thanks :)

Answer 1

You can do something like this:

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;    
}

It's important to use the setTimeout in this case (even the delay is just 1 ms). Also note that the use of the class .list_item is not really necessary because you can set the transition for the newly added li using script.

Demo.