Multi-page application View Transitions are here
Вставка
- Опубліковано 11 чер 2024
- Transform your web experiences with View Transitions. Last year, we debuted Same-Document View Transitions for use in your Single-Page Applications (SPAs), and now we're taking it to the next level. Get ready for enhanced control over View Transitions to more easily create immersive user experiences. We are also giving you Cross-Document View Transitions which allow you to create seamless navigations in your Multi-Page Applications (MPAs).
View Transitions API → goo.gle/view-transitions
Navigation API → goo.gle/navigation-api
View Transitions API MPA → goo.gle/mpa-view-transitions
Speakers: Bramus Van Damme
Watch more:
Check out all the Web videos at Google I/O 2024 → goo.gle/io24-web-yt
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GoogleIO
Products Mentioned: Web Platform in Chrome
Event: Google I/O 2024 - Наука та технологія
Check out all the web sessions at Google I/O → goo.gle/io24-web-yt
This means the comeback of MPA!!
Were they ever gone? ;)
Nice work Bramus! 👏👏👏
Are view transitions interruptible? Excited for gesture driven transitions
Right now, when a View Transition gets interrupted it skips to the end. Regargetable View Transitions is something we are still thinking about.
Are these APIs web standards? I.e. if I build view transitions for Chrome will they work in Safari when they add the feature?
I ask because I've already built a site using the tag view transition implementation and now it looks like this is going to be replaced by CSS directives. Ideally I don't want to have to change my code until this is all settled. Any idea when a consensus will be reached?
The API which has shipped in Chrome was standardized at CSSWG with feedback from Apple/Mozilla. Definitely will not be changing. :)
The thing with the meta tag you implemented back in the day was part of a prototype which was only available behind an experimental feature flag in Chrome. It lead up to what is now shipping in Chrome, which is part of the View Transitions Level 2 CSSWG web standard.
To change your experimental implementation to the standardized one, swap out the meta tag by the at-rule to opt-in. All the rest stays the same.
View Transitions are the perfect candidate for Progressive Enhancement: once other browser vendors also implement Cross-Document View Transitions, they too will start showing the transitions. Until then, users get the experience without View Transitions.
@@KhushalSagar Thanks for the reply. I don't know if you are an expert on View Transitions but in case you are - please can you explain something to me: if the view-transition is now triggered by a CSS rule, does this mean that now, all the linked CSS files are preloaded before the new page is displayed, rather than streamed in? I suppose I should expect this because if they aren't loaded, the transition won't know where to transition elements to... Can you clarify please? Or point me in the direction of somewhere this is explained. Thanks :)
@@bramus Thanks for the reply. I wondered if you could please can you please clarify something to me: if the view-transition is now triggered by a CSS rule, does this mean that now, all the linked CSS files are preloaded before the new page is displayed, rather than streamed in? I suppose I should expect this because if they aren't loaded, the transition won't know where to transition elements to... Can you clarify please? Or point me in the direction of somewhere this is explained. Thanks :)
Was fixed to use View Transitions? Trying View Transitions with an embedded UA-cam video playing was not smooth, it refreshed the whole on the target screen.
Do you mind filing a crbug? It doesn't sound like you were trying to do a transition within the . More like using the as a named element.
Just a quick update in case this was your issue, View Transitions now work as expected if there is a same-origin navigation in an .
Game. Changing. 😢😢😢
Cross document view transitions? IE6 “Hold my beer…” funny how back then everybody hated it 😂
Have the performance issues been fixed? Only a few weeks ago they were still really sluggish.
What issues specifically are you running into? Got a repro to share?
Does this work with different CSS files for each page? Ik the other version of this API didn't work with different CSS which was a deal breaker for me.
Yes, you can have different CSS files on each page. I'm not sure what you mean by "the other version of this API didn't work with different CSS". Could you clarify?
Astro Mentioned
Others: Multi-page application view transitions are really cool
Me: How this dinosaur going to make this jump ... ?
flutter support for this?
How is flutter relevant for this function?
Flutter don't need this.
Cause flutter web app routing is a single client side Virtual Rendered canvas.
I guess its just a SPA that has some shallow routing
@@forno_nicolas Actually, Flutter can benefits from this, since people can have MPAs that contains different canvas ctx on each. I have tried something like this, and it worked pretty well.
Sorry, but those hands transitions are overpowering the content.