View transitions
The promise of view transitions is to allow a straightforward way of transitioning from one “view,” which is the current visual state of an element, to another visual state, which is what will occur when you press a button, or some other action that creates a change in the DOM.
There are “same-document” view transitions that operate on elements in the same page, and “cross-document” view transitions that operate on different pages. We will look at same-document view transitions first.
It is also worth highlighting that while view transitions are supported in all the major browsers, there are additional features only in Chromium-based browsers, such as Chrome and Edge, currently.
The final caveat I would add before we get stuck in is that view transitions are not a panacea for all transitioning requirements. In some situations, it works wonderfully; in others, it can be hard work. Hopefully, by the end of this section...