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

On Sat, Jan 14, 2012 at 7:26 PM, Jonathan Snook <jonathan@snook.ca> wrote:
> 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.

I'm okay with something like this, but I'm curious about the
use-cases.  You present two uses:

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

The purpose of this seems to be just to control whether the
block->none change happens at the beginning or end of the transition.
This should be addressed more cleanly in the future once Transitions
gain the ability to transition arbitrary properties; you'll just set
"transition:opacity 1s, display 1s step-end;" or something.

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

It seems this could be done by just setting ".dialog.hidden > button {
pointer-events:none; }".

I'm concerned that a simple :transitioning pseudo wouldn't be enough -
it would trigger on *every* transition, but I suspect that decent uses
of it would actually want to trigger only on *certain* transitions.
Thus, I'd need to see some decent cases that would be helped by
something like this before I can really evaluate its usefulness.

~TJ

Received on Tuesday, 17 January 2012 23:51:09 UTC