On 2015/06/01 15:04, Kristopher Giesing wrote:
I have to admit I'm a bit confused. Doesn't getAnimations() always
return a sequence that's ordered by the animation sequence number [1]?
Not for CSS animations and transitions. For example, the priority of CSS
animations is determined by the ordering within the animation-name property.
So, if you write,
animation: a 1s, b 1s, c 1s,
a has the lowest priority, and c has the highest regardless of when they
start or when they were generated.
You could update the order as follows and the priority would change
despite the sequence number not changing:
element.style.animation = 'a 1s, c 1s, b 1s';
Likewise for transitions, if you write,
element.style.transition = 'all 1s';
getComputedStyle(element);
element.style.transform = 'translateX(100px)';
element.style.opacity = '0';
getComputedStyle(element);
the resulting animation sequence number for each transition isn't
defined since implementations aren't required to generate the
transitions for 'transform' and 'opacity' in any particular order.
That would mean in example 2 you'd get "a, b, c" in both invocations.
Perhaps I'm missing a subtlety of the custom animation priority [2]?
I think the details discussed on the GitHub issue[1] will probably help
here. We may or may not keep the custom animation priority depending on
how we spec the result of that discussion.
Best regards,
Brian
[1] https://github.com/w3c/web-animations/issues/62
Best,
- Kris
[1] http://w3c.github.io/web-animations/#dom-animatable-getanimations
[2] http://w3c.github.io/web-animations/#custom-animation-priority
On Sun, May 31, 2015 at 9:38 PM, Brian Birtles <[email protected]
<mailto:[email protected]>> wrote:
Hi,
I'm trying to nail down the ordering of animations so I can
implement it in Firefox. I wrote up an outline of this on Github[1]
and went over it with Shane, Doug and Mike last week who agreed it
seems reasonable.[2]
Coming to implement this now, however, I've come across the
following edge case:
elem.style.animation = 'a 2s, b 3s, c 4s';
let b = elem.getAnimations[1];
let c = elem.getAnimations[2];
elem.style.animation = 'a 2s, d 5s';
c.play();
b.play();
elem.getAnimations(); // what is the order here?
The issue is that so long as b and c are in elem's list of
animations, their order (priority) is well-defined. Once we drop
them from that list, however, what determines their priority?
As the spec stands, we'd fall back to regular animation priority
which is based on its animation sequence number[3]. This is defined
as being based on when the animation is created.
That's problematic because we don't require CSS animations or
transitions to be created in any specific order. Furthermore, even
if we did require that, you'd get strange results when, for example,
you do the following:
elem.style.animation = 'a 2s, b 3s';
getComputedStyle(elem).animationName; // flush style
elem.style.animation = 'a 2s, c 4s, b 3s';
let anims = elem.getAnimations(); // returns a, c, b
elem.style.animation = '';
anims.forEach(anim => anim.play());
elem.getAnimations(); // returns a, b, c. What??
I wonder if we should change the animation sequence number to be
based on when the animation last transitioned out of the idle state.
If we did that, the order in the first example would be 'a, d, c,
b'. In the second example, we'd get 'a, b, c' in both cases.
Doing this would also allow authors to alter the priority of
animations without having to regenerate them: simply cancel() and
play() to push to the top of the stack.
I think this is intuitive since cancelling an animation effectively
takes it out of any composition stack it might be contributing to.
What do you think?
Brian
[1] https://github.com/w3c/web-animations/issues/62
[2]
https://lists.w3.org/Archives/Public/public-fx/2015AprJun/0046.html,
item 3
[3] http://w3c.github.io/web-animations/#animation-sequence-number
