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 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

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
What does it mean by Continuous Integration, Continuous Delivery and Continuous Deployment?MiscellaneousHow to add a ribbon on top of a container using CSS?CSSHow to add multiple Columns in CSS like Bootstrap?CSSHow to create a cross-browser smooth scrolling with jQuery?jQueryHow to add multiple components in React app?ReactQuick Introduction to 11 Array Iteration Methods in JavaScriptJavaScriptHow to compile and watch Sass using Gulp in WordPress?SCSSControl rendering using CSS content-visibility propertyCSSWhat is React? Learn the basicsReactAn Example of Cross-site Scripting (XSS) Attack in PHP and How to Avoid It?PHPHow to create a Child Theme in WordPress?WordPressSome EASY-to-Understand CSS media query examplesCSS