WebKit Transitions and the Return of Visibility
Recently, I’ve had the pleasure of building the UI for a client program using Webkit. Access to all the CSS3 features has been great as well as completely liberating from the constraints of IE compatibility.
WebKit offers another great feature: the -webkit-transition property to animate transitions between different style declarations. One obvious application is fading an element in and out which requires a CSS property which I’ve long since relegated to the pile of “nice, but not so applicable” properties: “visibility.”
here’s an example:
.module {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.2s ease-in;
}
.module.display {
visibility: visible;
opacity: 1;
}
Why not just use the display property? Because even if display is “none”, an absolutely positioned <div> will block click and other mouse events from being detected by elements below (in terms of z-index) the hidden <div>.