On 2015/06/22 16:57, Shane Stephens wrote:
An alternative proposal:
CSS animations use sequence number as priority, and are created in tree-
and list- order. CSS Animations are still prioritized absolutely above
script animations (there are two lists). Changing an animation-name
property triggers an update of all listed sequence numbers. So:
elem.style.animation = 'a 2s, b 3s, c 4s'; // a: 0, b: 1, c: 2
let b = elem.getAnimations[1];
let c = elem.getAnimations[2];
elem.style.animation = 'a 2s, d 5s'; //a: 3, d: 4
c.play(); // c promoted to script animation, keeps sequence number
b.play(); // b promoted to script animation, keeps sequence number
elem.getAnimations(); // what is the order here? b,c,a,d
Forgive me for being dense, but I don't understand what's being proposed
here. Why would c.play() / b.play() promote to a script animation? And
what does that mean here? Does it mean it no longer reflects style at
all? Or just for the sake of ordering? Would pausing change anything?
Script animations have preserved text order in terms of their
*definition* (which is important, see below).
I don't understand this sentence.
Question: does getAnimations sort script animations separately from CSS
animations? I think it probably should so that the order reflects
application priority.
Yes. See the linked-to spec text in my previous mail as well as the
outline in the GitHub issue.[1]
elem.style.animation = 'a 2s, b 3s'; // a: 0, b: 1
getComputedStyle(elem).animationName; // flush style
elem.style.animation = 'a 2s, c 4s, b 3s'; // a: 2, c: 3, b: 4
let anims = elem.getAnimations(); // returns a, c, b
elem.style.animation = '';
anims.forEach(anim => anim.play());
elem.getAnimations(); // returns a, c, b.
So this works nicely now too.
It also works if you use start order.
Taking your weirdness:
var moveLeft = new Animation(...);
var moveRight = new Animation(...);
moveRight.play();
...
moveLeft.play();
// Wait, why doesn't moveLeft take effect?
Let's extend it another step, assuming that transitioning from idle does
update priority:
var moveLeft = new Animation(...);
var moveRight = new Animation(...);
moveRight.play();
...
moveLeft.play(); // moveLeft takes effect
moveRight.play(); // wait, why doesn't moveRight take effect?
Yeah, fair point. (Although the answer is simply, "because the animation
is already started".) But I don't understand how the proposal here fixes
this. Are you suggesting play() updates sort order? Can you spell out
the proposal in detail?
Thanks!
Brian
[1] https://github.com/w3c/web-animations/issues/62
