[csswg-drafts] [web-animations-1] Possible improvements to commitStyles (#3905)

birtles has just created a new issue for https://github.com/w3c/csswg-drafts:

== [web-animations-1] Possible improvements to commitStyles ==
When we discussed `commitStyles` recently there were a few concerns, particularly that it doesn't entirely solve the problem of growing lists in the fact of additive animations (although it does reduce its severity by a couple of orders of magnitude).

I wonder if it would be an improvement to tweak `commitStyles` as follows:

* Rename to `flatten` (?)
* Special-case transform lists to actually reduce the computed value to a single matrix (not just the serialized value)
* Cancel the animation

?

The last point about canceling the animation is just an observation I made after adding [the following code sample to the spec](https://drafts.csswg.org/web-animations-1/#fill-behavior):

```js
elem.addEventListener('click', async evt => {
  const animation = elem.animate(
    { transform: `translate(${evt.clientX}px, ${evt.clientY}px)` },
    { duration: 800, fill: 'forwards' }
  );
  await animation.finished;
  animation.commitStyles();
  animation.cancel();
});
```

I wonder if that approach of committing and then canceling is common enough to make it the same operation. It would make `commitStyles` less useful for snapshotting an animation in progress but I wonder if there's actually any use case for that.

The above code would then become:

```js
elem.addEventListener('click', async evt => {
  const animation = elem.animate(
    { transform: `translate(${evt.clientX}px, ${evt.clientY}px)` },
    { duration: 800, fill: 'forwards' }
  );
  await animation.finished;
  animation.flatten();
});
```

Perhaps `flatten()` doesn't adequately convey the fact that the animation is canceled however. 
It would also mean this method is doing both animation model and timing model work which is perhaps a little odd.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3905 using your GitHub account

Received on Friday, 10 May 2019 01:08:55 UTC