The lifecycle of a cross-document view transition

1. In the old document:
   1. The user initiates a navigation.
   2. When the new page is ready the pageswap event is fired.
      • You can now customise the transition, e.g. by mutating its types, or skip it altogether.
   3. Current state captured as the “old” state.
   4. Rendering paused.
   5. The navigation proceeds.
2. Then, in the new document:
   1. The pagereveal event is fired.
      • This is another opportunity for you to customise the transition.
   2. Current state captured as the “new” state.
   3. Transition pseudo-elements created.
   4. Rendering unpaused, revealing the transition pseudo-elements.
   5. viewTransition.ready fulfils.
   6. Pseudo-elements animate until finished.
   7. Transition pseudo-elements removed.
   8. viewTransition.finished fulfils.