Re: [csswg-drafts] [css-view-transitions-1] Handling DOM updates when a transition's animation is reverse back to start/canceled (#7957)

Expanding on the flow to make sure I got the details right:

1. Developer starts the transition.
2. While the animation is progressing, the user takes an action which should restore the page back to the old state. For example, they press the back button.
3. The developer would like the animation to play in reverse (from the current state) and end with the DOM back to the old state.

First option would be easy but creating a new ViewTransition would cause us to first jump to the DOM state that the current transition will end at.

I'm trying to think whether this could be doable with the current API. Something like:

```js
function goBack(transition) {
  // Reverse animations on all pseudo-elements.
  // Would UA CSS animations show up in this list? And would reverse() have them go back from current state.
  for (animation: document.getAnimations())
    animation.reverse();

  // When all the reverse animations are done, update DOM back to the old state.
  transition.finished.then(updateDomToOldState);
}
```

The other option would be that we add an API to do the animation reverse as a convenience:
```js
function goBack(transition) {
  transition.reverse();
  // When all the reverse animations are done, update DOM back to the old state.
  transition.finished.then(updateDomToOldState);
}
```

Or, include the DOM update back to old state in the API since I'm assuming it'll need to be done for every use of the API:
```js
function goBack(transition) {
  // The reverse API takes a callback which is invoked when all animations are done but before pseudo-elements
  // are removed.
  transition.reverse(updateDomToOldState);
}
```

-- 
GitHub Notification of comment by khushalsagar
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7957#issuecomment-1292141489 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 26 October 2022 14:30:00 UTC