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.