How to animate list items using CSS and JavaScript?

In this post, I demonstrated how to add and remove list items. There was no style or animation in list items.

Let’s add some style to the list items.

li {
  list-style: none;
  background: navy;
  color: #fff;
  line-height: 2;
  padding: 0 2%;
  overflow: hidden;
  width: 10%;
  text-align: center;
  border-radius: 10px;
  margin: 2px 0;
}

This is how it will look like afterwards:

Fading Animation

To create a fading animation, we can make use of opacity and transition property.

Also, we need to add additional class to inject using script.

li {
  ...
  transition: all 0.4s ease-out;
  opacity: 0;
  ...
}
li.show {
  opacity: 1;
}

Finally, in JavaScript, we need to inject the show class we created in CSS but after few microseconds. We can do that using setTimeout.

...
  setTimeout(function() {
    newEl.className = newEl.className + " fade show";
  }, 10);
...

Checkout the animation in action:

Sliding Down

Sliding down animation is all about height. We’re going to set the height to 0 initially. We’ll have height set in show class so when we inject the show class the height will go from 0 to 30px.

Here is the demo in action:

Tweet about it