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 :)

possible duplicate of [css transitions on new elements](http://stackoverflow.com/questions/12088819/css-transitions-on-new-elements) — Serg, Jun 22 '14 at 06:11

King King · Accepted Answer · 2014-06-22T13:17:04.957

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.

edited Jun 22 '14 at 13:17

answered Jun 22 '14 at 05:42

King King

61,710
16
105
130

Thank you, much appreciated. So, I'm guessing appendChild will replace the += INNER HTML? – Jabari King Jun 22 '14 at 13:01
@Jking yes, but using `appendChild` allows us to change some properties for the newly added element, as you can see we changed the `opacity` to `0`, then change the `opacity` to `1` to animate it (because we use CSS transition). the important thing is we have to use `setTimeout`, otherwise there is not any transition. – King King Jun 22 '14 at 13:04
So should the setTimeout duration be equal to the transition duration? – Jabari King Jun 22 '14 at 13:06
@Jking no it's not duration, it's the delay time(or timeout), it should be fixed at `1`. To change the duration you have to change the CSS transition property (as in the `.list_item` rule), such as to `transition: opacity 3s` (the duration was changed from `1s` to `3s`). In case you don't know here, here is the demo with duration of `3s` http://jsfiddle.net/viphalongpro/2QY59/1/ – King King Jun 22 '14 at 13:08
1

Thank you for all of the help, just one more thing. Could you please explain the setTimeout line and why there are two functions along with the item in parentheses at the end? – Jabari King Jun 22 '14 at 13:11
@Jking ah looks like I complicated the thing, messed up with some issue related to `setTimeout`, you can just do it more simply, see the updated code. – King King Jun 22 '14 at 13:17
1

It's fine. Thanks for all of the help. – Jabari King Jun 22 '14 at 13:21
@Jking if the answer is helpful, please accept it by clicking on the gray tick :) and welcome to SO where you'll find many helps. – King King Jun 22 '14 at 13:24
Ha, I'm such a noob that I'm currently unable to vote up and down on things. I'm very sorry. – Jabari King Jun 22 '14 at 13:27
@Jking No it's because you don't have enough reputation, your reputation will increase if you accept some answer (when you ask) or have your questions upvoted or have your answers upvoted or accepted (when you add your answers to help others). – King King Jun 22 '14 at 13:35
No, no, I understand that completely. I will help the community as much as I can! I did however, accept your answer by pressing the green check if I am not mistaken. – Jabari King Jun 22 '14 at 13:39

Animate Newly Created List Element

1 Answers1

Demo.