javascript - Animate Newly Created List Element -

javascript - Animate Newly Created List Element -

i trying have added 'li' tags animated upon entrance, preferably using css. adding transitions 'display', 'opacity', , 'all' have not resulted in change. here's 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 :)

you can 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 of import utilize settimeout in case (even delay 1 ms). note utilize of class .list_item not necessary because can set transition newly added li using script.

demo.

javascript css animation