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

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Fri, 30 Mar 2012 14:15:26 -0700
Message-ID: <CAAWBYDDPjUO7LXdmBDR15aPCRxC1Ji5krimwJGpxyARPpFBhWQ@mail.gmail.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
Cc: "www-style@w3.org" <www-style@w3.org>
On Fri, Mar 30, 2012 at 2:10 PM, Andrew Fedoniouk
<news@terrainformatica.com> wrote:
> 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.

This seems to fall under the general "selectors can't depend on CSS
properties" rule.

What happens in the following?

:animating { animation: none; }
:not(:animating) { animation: foo 1s infinite; }

~TJ
Received on Friday, 30 March 2012 21:16:14 GMT

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