W3C home > Mailing lists > Public > www-style@w3.org > March 2012

[css-transition] :animating state pseudo-class & display property

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Fri, 30 Mar 2012 14:10:01 -0700
Message-ID: <CALRQH7-gv5ZrvQx0ibHjJYg3gcSOiV4HovjwZtCUasb_ZNs83g@mail.gmail.com>
To: "www-style@w3.org" <www-style@w3.org>
Consider that we have expanding/collapsing section that we would like to
animate.
At the end of collapsing the section should be set to display:none.
And at start of animation it shall get display:none. While animating it
should have overflow:hidden
to achieve needed effect.

I propose to add :animating pseudo-class that is "on" while element is
under the animation.
So we will have this:

section.expanded
{
   display:block;
   height: max-content;
   transition: height 400ms;
}
section.expanded:animating { display:block; overflow-y:hidden; }

section.collapsed
{
   display:none;
   height: 0;
   transition: height 400ms;
}
section.collapsed:animating { display:block; overflow-y:hidden; }

The :animating state pseudo-class will help to deal with
other discrete non-animateable properties while animations.

We are using :animating year or so ago and found it
quite useful in many animation related cases.

-- 
Andrew Fedoniouk.

http://terrainformatica.com
Received on Friday, 30 March 2012 21:10:34 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:48:53 GMT