Re: transitions vs. animations

On Wed, Apr 7, 2010 at 8:48 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> I'm not sure, though, if making a play-in animation happen when the
> page loads makes sense.  The Animations spec specifically calls out
> this case and makes it clear that it does, but it has to handle both
> continuous animations (play-during) and ones that happen when
> something changes (play-in).  I think this intermixing of concepts
> isn't ideal here.  For example, if I want a tooltip to spiral into
> view when it has the .visible class, do I really want it to do so on
> page load if, for some reason, I have a visible tooltip immediately?
> I doubt it.  If play-in animations did run on page load, then I'd have
> to set up a different class that just applied the spiral animation,
> and set both .visible and .spiral when I'm making a tooltip show
> dynamically, but only set .visible when I'm making it show
> immediately.  That's not very good.
>
> On the other hand, I might want some element to throb for attention a
> few times before quieting down on page load, which would either
> require play-in to work on page load, or for me to set a play-during
> and then remove it after a few animationiteration events in
> javascript.  The latter is okay, I think.  It's pretty trivial to
> code:
>
> $(".immediate-attention").bind('animationiteration',function(){
>  var throbs = $(this).data("throbs") || 0;
>  if( throbs >= 3 ) {
>    $(this).removeClass('.immediate-attention');
>  }
>  $(this).data("throbs",throbs + 1);
> });
>
> I think I'd rather write the above code on the (rare, I think) times
> when I want a finite animation to run on page load, then have to deal
> with what I described above to *prevent* an animation from happening
> on page load, but have it happen any other time.

Alternately, I could be intelligent about this and having play-during
animations accept a play-count that simply defaults to 'infinite'.

That way I can write my code as:

.tooltip {
  play-in: spiral 1s;
}

.immediate-attention {
  play-during: throb 2s 3;
}

And the tooltip will now work as expected (simply appear on the screen
if it's visible from page load, but spiral in if it's made visible
dynamically), while anything requiring immediate attention will throb
3 times on page load (and any other time an element happens to gain
the immediate-attention class for some reason).

~TJ

Received on Wednesday, 7 April 2010 16:02:56 UTC