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 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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
WordPress: How to get ACF field values from another post?WordPressWhat are Class Constants in PHP?PHPArbitrary Arguments in SCSS functionsSCSSWhat’s a Closure in JavaScript?JavaScriptWhat is the difference between Loosely Typed Language and Strongly Typed Language?MiscellaneousA quick introduction to API, REST API and PostmanMiscellaneousCanvas Drawing in HTML5HTMLHow to create a simple slider with CSS and jQuery?CSSHow to get Current Year, Month and Date in JavaScript?JavaScriptHow to create a horizontal scrolling menu with and without flex using CSS (or SCSS)?CSSHow to add menu to your WordPress theme?WordPressHow to add transparent text on top of an image using CSS?CSS