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:
animation fade list list style setTimeout sliding down style
