A dropdown should fade into view, not snap open. Set its opacity to 0 when closed and 1 when open, then transition between them. Opacity accepts values from 0 (fully invisible) to 1 (fully opaque); unlike display, it can produce a fade. section 15.3.2 section 15.3.1
The transparent-menu trap
A drawer with `opacity: 0` and `transition: opacity 0.2s linear` appears to close smoothly. But it remains on the page: an invisible menu item can intercept a click intended for the link behind it. Transparency alone is not a closed state. section 15.3.2
Listing 15.9 Using a transition delay to manipulate when visibility changes
.dropdown__drawer {
position: absolute;
background-color: var(--background-color);
width: 10em;
visibility: hidden; #1
opacity: 0; #1
transition:
opacity 0.2s linear,
visibility 0s linear 0.2s; #2
}
.dropdown.is-open .dropdown__drawer {
visibility: visible; #3
opacity: 1; #3
transition-delay: 0s; #4
}
The complete dropdown rules pair the opacity fade with a visibility change. On closing, visibility switches to hidden after the 0.2-second fade; on opening, the delay resets to zero so the drawer becomes visible immediately. section 15.3.2
Visibility solves the click problem, but it does not remove an element from document flow. The dropdown uses absolute positioning, so a hidden drawer does not leave a gap. Also check stacking when adding opacity elsewhere: a value below 1 creates a stacking context, which can affect how descendants overlap other elements. section 15.3.2 section 6.4.3
Opacity can work alongside motion rather than provide the whole effect:
- Navigation labels transition from `opacity: 0` and `translate: -1em` to full opacity and their final position on hover or keyboard focus within the menu. section 16.2.2
- Fly-in cards use keyframes to reach full opacity while moving forward in 3D and rotating toward the viewer. section 17.2.2
