Implement helpers for the new Multi Page View Transitions API [🟥 awaiting Firefox support]

[chrisblakley]

Will need a transitions stylesheet along with an entering and exiting meta tag. The API is still currently in development.

[chrisblakley]

Here is another example: http://navtransoysteine.appspot.com/starry_night/ (Edit: This is a dead link now)

[chrisblakley]

http://chrislord.net/index.php/2015/04/24/web-navigation-transitions/

[chrisblakley]

https://github.com/jakearchibald/navigation-transitions

[chrisblakley]

Not sure if pageTransitionEvent would help... https://caniuse.com/#feat=page-transition-events

[chrisblakley]

Future feature discussed in Chrome at the dev summit 2018. Called "Portals".

[chrisblakley]

More info on portals: https://github.com/WICG/portals

Related to https://github.com/chrisblakley/Nebula/issues/1782

[chrisblakley]

Portals browser support: https://caniuse.com/#feat=portals

[chrisblakley]

Closing this issue in favor of the dedicated Portals issue #1782

[chrisblakley]

New Page Transition API: https://www.youtube.com/watch?v=JCJUPJ_zDQ4

Developer guide: https://github.com/WICG/shared-element-transitions/blob/main/developer-guide.md Note that individual names may change.

[chrisblakley]

More references:

[chrisblakley]

Tracked in CanIUse now: https://caniuse.com/view-transitions

Note: This is for single pages, not cross document view transitions!

[chrisblakley]

More details on the cross-document view transitions here: https://github.com/WICG/view-transitions/blob/main/cross-doc-explainer.md

The above support table is specific to single pages.

[chrisblakley]

There will be a session at Google I/O 2024 for this: "Multi-page application View Transitions are here":

[chrisblakley]

Much more information available now.

https://www.youtube.com/watch?v=eY6C_-aDdTo

Doc: https://developer.chrome.com/docs/web-platform/view-transitions/cross-document

MPA Demo: https://view-transitions.netlify.app/stack-navigator/mpa-prerender/ SPA Demo: https://live-transitions.pages.dev/

Browser Support: https://developer.chrome.com/docs/web-platform/view-transitions#cross-document_view_transitions (Chrome 126)

[chrisblakley]

Now, should Nebula automatically include this CSS that enables view transitions on by default, or defer to child theme developers to implement that?

@view-transition {
  navigation: auto;
}

[chrisblakley]

Here's what I'm starting to experiment with on my Nebula documentation website to learn this.

#hero-section,
#bigheadingcon,
.hero-area {
    view-transition-name: hero;
}

This fades between pages, but ideally I'd love to scale the height of the hero section between home page and subpage.

[chrisblakley]

Got a working demo added to Nebula: https://nebula.gearside.com/examples/multi-page-view-transitions-listing/

https://github.com/chrisblakley/Nebula/assets/6349678/f327b6c9-60bd-4bc2-a3fe-554dd1003989

[chrisblakley]

Now supported in Safari. Only wait on Firefox now.

https://caniuse.com/view-transitions