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

On Fri, Mar 30, 2012 at 2:15 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

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

To prevent possible oscillations implementations can ignore
transition/animation properties
in styles derived from rules with :animating pseudo-class used in any form.


-- 
Andrew Fedoniouk.

http://terrainformatica.com