Animating non-inactive properties with CSS3 transitions

Question

In my application, I am animating the opacity of the elements on the page with something like:

.s { transition-property: opacity; transition-duration: 250ms; } 

(with specific versions for a particular vendor). And then

 .s.hidden { opacity: 0; } 

So the animation starts when the hidden class is assigned. The problem is that mouse events are still detected on elements with zero opacity that I don’t need, so after completing the transition, I need to either set visibility to hidden or display to none . I hope I can do something like:

 .s { transition-property: opacity, visibility; transition-duration: 250ms; transition-delay: 0, 250ms; } 

and then

 .s.hidden { opacity: 0; visibility: hidden; } 

using the CSS transition mechanism for this is painless. As far as I can tell, this does not work, because visibility is an unmanaged property. But other transition structures, such as d3, handle non-animation properties, obviously, simply setting the value at the beginning of the transition or when it ends.

The best I could come up with was to use the transitionend event (and its browser-specific options like oTransitionEnd ) to catch the end of the transition and set visibility at that point, but I wonder if there is an easier way, it is advisable to stick exclusively to CSS . Or, as the name of my question suggests, is it the inanimate properties of just that?

Answer 1

visibility is an animated property, see specification .

This means that your .hidden class will work as you described. Demo here: http://jsfiddle.net/ianlunn/xef3s/

Edit: The specification is not entirely clear:

visibility: if one of the values ​​is “visible”, it is interpolated as a discrete step, where the values ​​of the synchronization function between cards 0 and 1 to “visible and other values ​​of the synchronization function (which occur only at the beginning / end of the transition or as a result of“ cubic bezier ”() functions with values ​​of Y outside [0, 1]) are displayed closer to the end point; if no value is "visible, then not interpolated".

But I think this means:

visibility does not smoothly animate between the visible and hidden range in how the opacity of the animation is between 1 - 0. It simply switches between visible and hidden in the initial and final transition states.

Providing the transition either occurs or out of visibility , the transition will occur. If you try to switch between visibility: hidden and visibility: collapse , for example, these values ​​are "not interpolated" and the transition will not occur.

So, in my example, opacity makes the element disappear, and then at the end of the transition, visibility bound to hidden .

Answer 2

As a good alternative to switching display / visibility, you can use opacity:0 with pointer-events:none .