- From: Andy Earnshaw <andyearnshaw@gmail.com>
- Date: Wed, 23 May 2012 21:14:44 +0000
- To: www-style@w3.org
- Message-ID: <CAOrM_WOwZ6A+i+mvAXqAbfmX2HUCDCdcyGCginw-5xurAu=jYQ@mail.gmail.com>
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