- From: Robert Flack via GitHub <sysbot+gh@w3.org>
- Date: Mon, 27 Feb 2023 22:11:55 +0000
- To: public-css-archive@w3.org
Just to put the sample code in the issue here, it would look something like this for top-layer:
```js
dialog.addEventListener('transitionstart', (evt) => {
if (evt.propertyName != 'top-layer')
return;
let transition = evt.target.getAnimations().filter((anim) => anim.transitionProperty == evt.propertyName)[0];
transition.pause();
runCustomPhysicsJSAnimation().then(() => { transition.finish(); });
});
```
You could also roughly (extra work to ignore already running animations not included here) polyfill the previous way this worked by using `getAnimations({subtree: true})` to find all animations within the dialog and adjusting the transition duration to match the end time of the last animation, e.g.
```js
dialog.addEventListener('transitionstart', (evt) => {
if (evt.propertyName != 'top-layer')
return;
let transition = evt.target.getAnimations().filter((anim) => anim.transitionProperty == evt.propertyName)[0];
let maxDuration = evt.target.getAnimations({subtree: true}).map(anim => anim.effect.getComputedTiming().endTime).reduce((maxDuration, duration) => Math.max(duration, maxDuration), 0);
transition.effect.updateTiming({duration: maxDuration});
});
```
--
GitHub Notification of comment by flackr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8189#issuecomment-1447193160 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 27 February 2023 22:11:56 UTC