RE: [css3-transitions] grid property is animatable?

Well, "grid-columns" is not really a length. It is a formula for calculating multiple lengths. So transition may be from

                grid-columns:(minmax(200px, 1fr) auto)[40]
to
                grid-columns: 1.5fr (2em 1fr)[15] 2em 1.5fr

where number of columns changes and different fractions and repeat patterns are used. I am not sure I can even suggest how to calculate an intermediate state...

It would make sense however to animate changes to individual column widths. Syntax for that is now very tentative though (and it may also be tricky because grid rows and columns are not elements).

From: Dean Jackson [mailto:dino@apple.com]
Sent: Friday, March 25, 2011 5:09 PM
To: Andrew Fedoniouk
Cc: Alex Mogilevsky; www-style list; Kevin Babbitt; Phil Cupp
Subject: Re: [css3-transitions] grid property is animatable?


On 26/03/2011, at 3:40 AM, Andrew Fedoniouk wrote:


From: Alex Mogilevsky<mailto:alexmog@microsoft.com>
Sent: Thursday, March 24, 2011 5:45 PM
To: www-style list<mailto:www-style@w3.org>
Cc: Kevin Babbitt<mailto:kbabbitt@microsoft.com> ; Phil Cupp<mailto:pcupp@microsoft.com>
Subject: [css3-transitions] grid property is animatable?

css3-transitions [1] has "grid-*" in the list of animatable properties. What is the thinking on which grid properties could animate, and what it means?

http://dev.w3.org/csswg/css3-transitions/

grid-column/row widths/height I think.

For example transition from this:
   body { grid-columns: * 200px *; }
to this:
   body { grid-columns: * 700px *; }

makes sense as far as I can tell.

Right. Any property that is a number, length, angle, time, etc should be animatable. Performance may be horrible in some cases (eg. changing the size of grid columns).

Dean

Received on Saturday, 26 March 2011 00:42:04 UTC