Skip to main content Accessibility Feedback

How to a fade in to vanilla JavaScript show and hide methods

Last week, we created some simple show() and hide() methods, and added a transition animation to them.

One of my readers mentioned that adding a fade in effect would be a nice visual touch, so today, let’s look at how to do that.

It’s all CSS #

The good news is that this can be done entirely with CSS.

First, we’ll add a default opacity of 0 to our .toggle-content class, and an opacity of 1 when the .is-visible class is included.

.toggle-content {
    display: none;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 350ms ease-in-out;
}

.toggle-content.is-visible {
    display: block;
    height: auto;
    opacity: 1;
}

Next, let’s add opacity to our transition. If we added another transition, it would override the first. Instead, we’ll use a comma to add multiple transition effects.

.toggle-content {
    display: none;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
}

.toggle-content.is-visible {
    display: block;
    height: auto;
    opacity: 1;
}

You’ll notice that the opacity animation is set to take longer than the one for height. If they’re the same length, the change isn’t visible, so we let it complete a little bit after the height is completed.

Here’s a demo.


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips