I honestly think if browsers implemented this, 80% of client-rendered Single Page Apps could be done as regular good ol’-fashioned websites.
Having to reimplement navigation for a simple transition is a bit much, often leading developers to use large frameworks where they could otherwise be avoided. This proposal provides a low-level way to create transitions while maintaining regular browser navigation.
Some great ideas for view transitionts in here! Also:
If you look at any of the examples on a browser that does not support them, the pages still function just fine. The transitions are an extra that’s layered on top if and when your browser supports them. Another concrete example of progressive enhancement in practice.
This looks like a handy library for managing page transitions on sites that are not single page apps.
I’ve said it before and I’ll say it again, but I really think that this handles 80% of the justification for using a single page app architecture.
Hallelujah! We’re finally getting our two wishes for CSS animations and transitions:
- Animating to and from
display: none;for the sake of enter/exit animations.- Animating to and from the intrinsic size of an element (such as
height: auto;).
This is a very handy tip if you’re adding view transitions to your website!
I can see myself almost certainly needing to use this clever technique at some point so I’m going to squirrel it away now for future me.
Enhance your website, progressively.
Debugging an error message.
If a browser feature can be used as a progressive enhancement, you don’t have to wait for all browsers to support it.
The View Transitions API glass is way more full than it is empty.
The View Transitions API (formerly Shared Element Transitions) could be the best or worst thing to happen to the web in years.