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
_______________________________________________
gtk-devel-list mailing list
gtk-devel-list@gnome.org
https://mail.gnome.org/mailman/listinfo/gtk-devel-list
