YogeshChauhan.com
How to animate list items using CSS and JavaScript?
February 14, 2021

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:

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript Mar 3 Window setInterval() Method in JavaScript Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS

You might also like these

How to overwrite file contents with new content in PHP?PHPHow to check if the page is single post page in WordPress?WordPressSpecificity of attribute selectorsCSSALTER DATABASE in PostgreSQLPostgresLearn to make a responsive gallery using CSS Grid and without media queriesCSSHow to create an empty array in Swift?Swift