The lifecycle of a same-document view transition

  1. Developer calls document.startViewTransition(updateCallback).
  2. Current state captured as the “old” state.
  3. Rendering paused.
  4. Developer’s updateCallback function is called, which updates the document state.
  5. viewTransition.updateCallbackDone promise fulfils.
  6. Current state captured as the “new” state.
  7. Transition pseudo-elements created.
  8. Rendering unpaused, revealing the transition pseudo-elements.
  9. viewTransition.ready promise fulfils.
  10. Pseudo-elements animate until finished.
  11. Transition pseudo-elements removed.
  12. viewTransition.finished promise fulfils.