[css3-transitions] Why isn't display an animatable property?

I'm just wondering if there's some kind of technical limitation. The
different display values mostly affect layout the same as combinations of
the height, width, and overflow properties. For instance, as far as a web
page viewer is concerned, a <div> with display:none could have been coded as
 height: 0; overflow-y: hidden; to achieve the same layout. So, for the
purposes of transitions and animations, why can't we do the same? This
<div>, when animated from display:none to any other value, could animate
from a height of 0px to the current value of height. Hiding and showing is
arguably the most common use of display, and possibly even the most
commonly animated CSS property in JavaScript helper libraries like jQuery
or $fx. For switching any other properties, both the height and width of
the element could be animated.

Perhaps there's something that I've not considered, but one of the use
cases here is animating table rows. Consider a scenario where a user is
looking at a table containing information about many different items. Only
the most relevant items are displayed to the user, but if he hovers over
the table the rest of the data is shown. How would you go about animating
this? overflow-y:hidden; height:0; doesn't work on table rows, so in
reality you have to jump through several hoops to get a reasonably
good-looking effect. For tables without borders, the easiest way I've
discovered is to animate font-size, otherwise you also have to animate the
border-width. Another option is to increase the markup using additional
elements in each cell, but you still have to animate the border for these
elements. In any case, I don't think these methods would not occur to many
users.

Received on Thursday, 31 May 2012 18:11:46 UTC