Animating non-animatable properties with CSS3 transitions

Question

In my app I'm animating the opacity of elements on the page with something like:

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

(with vendor-specific versions, of course). And then

.s.hidden {
    opacity: 0;
}

So the animation starts when the hidden class is assigned. Problem is, mouse events are still detected on elements with opacity zero, which I don't want, so I need to either set visibility to hidden or display to none after the transition is finished. I would hope to be able to do something like:

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

and then

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

to use the CSS transition machinery to do this painlessly. As far as I can tell, that doesn't work because visibility is a non-animatable property. But other transition frameworks such as d3 do handle non-animatable properties, in the obvious way by simply setting the value when the transition starts, or when it ends.

The best I've been able to come up with is to use the transitionend event (and its browser-specific variants such as oTransitionEnd) to catch the end of the transition and set visibility at that point, but I'm wondering if there's any easier way, preferably sticking purely to CSS. Or, as the title of my question implies, are non-animatable properties just that?

Answer 1

visibility is an animatable property, see the spec.

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

Edit: the spec isn't perfectly clear:

visibility: if one of the values is ‘visible’, interpolated as a discrete step where values of the timing function between 0 and 1 map to ‘visible’ and other values of the timing function (which occur only at the start/end of the transition or as a result of ‘cubic-bezier()’ functions with Y values outside of [0, 1]) map to the closer endpoint; if neither value is ‘visible’ then not interpolable.

But this is what I believe it means:

visibility doesn't smoothly animate between a range of visible and hidden in the way that opacity animates between 1 - 0. It simply switches between visible and hidden at the start and end states of the transition.

Providing the transition is either going to or from visibility, then a transition will occur. If trying to transition between visibility: hidden and visibility: collapse for example, those values are "not interpolable" and the transition would not occur.

So in my example, opacity causes the element to fade out and then at the end of the transition, visibility snaps to hidden.

Answer 2

As a good alternative to display/visibility toggle, opacity:0 with pointer-events:none could be used.