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

Re: [css3-animations] :animating or :transitioning pseudo-class

From: Jonathan Snook <jonathan@snook.ca>
Date: Sat, 14 Jan 2012 22:26:55 -0500
Message-Id: <9B309C95-4220-4666-B5FA-51A4B105C1A2@snook.ca>
To: www-style@w3.org
I know there's plenty of discussion around animations and transitions and having done a search on the topic, I saw this briefly mentioned last October and didn't see any kind of follow-up to it.

I'd love to see an :animating and/or :transitioning pseudo-class. It would help in defining things like display:block during transitions but could also be used to define how other elements behave while an element is transitioning. 

.dialog {
	opacity:1;
	transition: opacity 1s;
}

.dialog.hidden {
	opacity:0;
	display: none;
}

.dialog:transitioning {
	display:block !important;
}

Or for related elements:

.dialog:transitioning > button {
	pointer-events:none; // prevent double click while the dialog fades out
}

The biggest catch I see to this is trying to define animation or transitions inside the pseudo-class.

.dialog:transitioning {
	transition: opacity 2s;
}

Interested in hearing more feedback on this idea.

Jonathan.


On 2011-10-02, at 3:15 PM, Andrew Fedoniouk wrote:

> As far as I can see :animating pseudo-class or something like that
> is the only reasonable solution. As animation per se is a "third state of
> CSS matter".
Received on Sunday, 15 January 2012 03:27:53 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:48 GMT