- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Fri, 30 Mar 2012 14:15:26 -0700
- 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 UTC