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
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:

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

   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.

Received on Friday, 30 March 2012 21:10:34 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:14 UTC