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

The real problem is that the rule matching phase occurs before the style computation phase. Consider the following CSS code :

    a { color: black; transition: all 0.2s; }
    a:hover { color: blue; }
    a:animating { ... }

In the browser, the matching phase occurs at a time where the only available information is :

    a { ... }
    a:hover { ... }
    a:animating { ... }

It’s impossible to determine with that information if :animating is matching or not.

With :hover (which faces a similar problem), a small trick has been used: each time the layout is recomputed, the previous location of the element on the screen is used to find out if :hover matches or not. But with your sample it wouldn’t work because the first time the element would be redrawn, it wouldn’t have the “overflow-y” applied (because it previously didn’t have :hover matching and therefore no transition applied), causing a visible glith on the screen.

However, isn’t it possible to keep the declaration “overflow-y: hidden” valid all the time? I mean, if you set height to max-content, there’ll be no overflowing so the value of overflow-y should not influence the layout (expect if you used ‘scroll’). If not, I guess you’ll have to wait for SVG Timesheets to have more granular control about that.

Regards,
François

From: Andrew Fedoniouk 
Sent: Friday, March 30, 2012 11:28 PM
To: www-style@w3.org 
Cc: www-style@w3.org 
Subject: 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