Yogesh Chauhan's Blog

How to animate list items using CSS and JavaScript?

in CSS & JavaScript on 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:


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Control Scrolling with CSS Scroll SnapCSSHow to display random posts in WordPress?WordPressLIKE and ILIKE Operators in PostgresPostgresHow to implement NSNumberFormatter in Swift for currency?Swift6 Different Functions to Sort Arrays in PHPPHPA simple example on grid ‘auto-fill’ vs ‘auto-fit’CSSJavaScript Data Types and Data Structures Things to RememberJavaScriptWhat is React? Learn the basicsReactArbitrary Arguments in SCSS functionsSCSSHow to modify the latest post array using get_posts() in WordPress?WordPressSolution to “Call to undefined function mysql_error()” in RevSlider WordPress PluginWordPressfirst-of-type and last-of-type selectors in CSSCSS