- From: Brian Birtles via GitHub <sysbot+gh@w3.org>
- Date: Thu, 25 Apr 2019 00:29:41 +0000
- To: public-css-archive@w3.org
> I'm not particularly excited about the need to flush in there... Is the computed style only needed for logical properties?
The computed style is only needed for logical properties, but the flush is needed to ensure we commit the up-to-date state.
For example:
```js
div.style.fontSize = '10px';
const anim = div.animate(
{ width: '100em' },
{ duration: 1000, fill: 'forwards' }
);
anim.ready.then(() => {
anim.finish();
div.style.fontSize = '20px';
anim.commitStyles();
anim.cancel();
console.log(getComputedStyle(div).width);
});
```
Without the flush, this will produce `1000px` instead of `2000px`. (Furthermore, we have to wait at least a frame after loading or else `commitStyles` will throw since `div` is still not being rendered, hence the waiting on `ready` above. If we flush we don't need to do that.)
A more likely case is something like:
```js
container.style.fontSize = '10px';
const containerAnim = container.animate(
{ fontSize: '20px' },
{
duration: 1000,
fill: 'forwards',
easing: 'step-end',
}
);
const childAnimA = child.animate(
{ width: '100em' },
{ duration: 1000, fill: 'forwards' }
);
const childAnimB = child.animate(
{ width: '100em' },
{ duration: 1000, fill: 'forwards' }
);
childAnimA.onremove = () => {
childAnimA.commitStyles();
childAnimB.cancel();
console.log(getComputedStyle(div).width);
};
```
This too will produce `1000px` without a flush but `2000px` with the flush (since animation events, like rAF callbacks, run before we update style for the frame).
> I wonder if we should be preserving them later, or deferring the `commitStyles` somehow...
Deferring the `commitStyles` sounds interesting. I'm not sure how that would work though. (In particular I wonder how it would interact with additive effects since, if you have a bunch of additive effects finishing at once, you need them to be committed in turn.)
--
GitHub Notification of comment by birtles
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3689#issuecomment-486475363 using your GitHub account
Received on Thursday, 25 April 2019 00:29:43 UTC