Our opacity+visibility test gives decent results, but we never see the fade-out transition since the `visibility:hidden` gets applied instantly at the start of the fade-out transition. So we’re using a bit of JavaScript magic to fix this.
Test link after the hidden content.
What we need to do is delay the moment the visibility:hidden declaration is applied to just after the opacity transition has ended. We can do this in JavaScript by listening on the transitionend event.
But we don’t want to put any CSS declarations in our JavaScript code. So what we’re doing is adding a class called _transition_ — any other name would be fine — to our target element when we’re changing its state (showing or hiding it), and removing this class when the transition ends. So we can use this kind of CSS code:
.visible {
visibility: visible;
opacity: 1;
}
.hidden {
visibility: hidden; /* Hide for real so that content can’t be tabbed to */
position: absolute; /* Hidden element should not impact layout */
opacity: 0;
}
.hidden._transition_ {
position: static; /* Don’t remove from document flow just yet */
visibility: visible; /* Stay visible while the transition is happening */
}
Please look at this page’s source code (especially the JavaScript part) for details.
:hover, :focus or :target pseudo-classes).transitionstart event. So we have to hard-code the information “a transition starts now” in our JavaScript code. This means that we have to know that our CSS code will trigger a transition.