Re: CSS Transitions

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:

       function() { 

When pressed:



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

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


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:


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

[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]