Re: CSS Transitions

[Owen Taylor <otaylor redhat com>]

On Wed, 2013-05-08 at 10:58 +0100, Allan Day wrote:
> Hi all,
>
> Last week I had a go at adding CSS transitions to Adwaita. It was
> pretty easy to do, and the familiarity of CSS made it easy to get
> started. However, I encountered an issue which leaves me uncertain how
> to proceed.
>
> The problem is that CSS doesn't provide a way to specify transitions
> according to beginning and end states. Instead, each style class can
> have a transition associated with it, and it is triggered whenever
> that style appears.
>
> I can set an animated transition for pressed buttons, but that
> animation is used whenever the pressed button style appears,
> irrespective of the style of the button beforehand. The pressed button
> transition will be used when a window changes from being unfocused to
> being focused, for example (in which case all the buttons in the
> window look like they are being pressed at the same time), or when it
> changes from being insensitive to being sensitive.
>
> As a result of this issue, I'm not sure that I can make use of CSS
> transitions, which is a shame - the ability to animate between
> different widget states would definitely add to the user experience.

I think you can quickly get into prohibitively heavy complexity here,
which is why, presumably, that CSS doesn't try to to have the idea of
start and end states.

If I was handling this on the web, I'd probably do something like,
in setup:

  $(button).transitionEnd(
       function() { 
           $(this).removeClass('pressing');       
       });

When pressed:

 $(button).addClass('pressed').addClass('pressing');

In CSS:

 .button.pressed { background: red; }
 .button.pressing { transition: background 1s; }

I think we possibly should do something similar here. We could do
something like:

 gtk_style_context_add_temporary_class(button,
GTK_STYLE_CLASS_PRESSING);

With the semantics of "temporary" meaning "removed when last transition
finishes". I don't think you'd need many of these style classes to allow
most of what the designers want.

A generalization would be to automatically add extra temporary
pseudo-classes on changing state:

 .button:active-changing { transition: background 1s; }

Note that you can represent a transition in a particular direction as:

 .button:hover:hover-changing

So you don't need to represent that in the pseudo-class, but I'm worried
about the performance implications of having it on, in
particular, :backdrop.

- Owen