docs: add view transitions

[zeroedin]

What I did

1. Add css view transitions proposal

Testing Instructions

Notes to Reviewers

[changeset-bot]

⚠️ No Changeset found

Latest commit: f518ec1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for red-hat-design-system ready!

Name	Link
🔨 Latest commit	f518ec1
🔍 Latest deploy log	https://app.netlify.com/projects/red-hat-design-system/deploys/68c9b12f94d58d00083eaea1
😎 Deploy Preview	https://deploy-preview-2543--red-hat-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Size Change: 0 B

Total Size: 243 kB

ℹ️ View Unchanged

Filename	Size
./elements.js	570 B
./elements/rh-accordion/context.js	162 B
./elements/rh-accordion/rh-accordion-header.js	2.67 kB
./elements/rh-accordion/rh-accordion-panel.js	1.27 kB
./elements/rh-accordion/rh-accordion.js	3.35 kB
./elements/rh-alert/rh-alert.js	5.06 kB
./elements/rh-announcement/rh-announcement.js	2.17 kB
./elements/rh-audio-player/rh-audio-player-about.js	1.83 kB
./elements/rh-audio-player/rh-audio-player-rate-stepper.js	1.76 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js	1.47 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js	1.41 kB
./elements/rh-audio-player/rh-audio-player.js	12.4 kB
./elements/rh-audio-player/rh-cue.js	1.95 kB
./elements/rh-audio-player/rh-transcript.js	2.68 kB
./elements/rh-avatar/random-pattern-controller.js	2.72 kB
./elements/rh-avatar/rh-avatar.js	2.61 kB
./elements/rh-back-to-top/rh-back-to-top.js	1.97 kB
./elements/rh-badge/rh-badge.js	1.63 kB
./elements/rh-blockquote/rh-blockquote.js	1.38 kB
./elements/rh-breadcrumb/rh-breadcrumb.js	1.67 kB
./elements/rh-button/rh-button.js	3.32 kB
./elements/rh-card/rh-card.js	3.12 kB
./elements/rh-chip/context.js	165 B
./elements/rh-chip/rh-chip-group.js	1.58 kB
./elements/rh-chip/rh-chip.js	2.06 kB
./elements/rh-code-block/prism.css.js	667 B
./elements/rh-code-block/prism.js	572 B
./elements/rh-code-block/rh-code-block.js	7.72 kB
./elements/rh-cta/rh-cta.js	3.67 kB
./elements/rh-dialog/rh-dialog.js	4.72 kB
./elements/rh-dialog/yt-api.js	617 B
./elements/rh-disclosure/rh-disclosure.js	2.25 kB
./elements/rh-footer/rh-footer-block.js	714 B
./elements/rh-footer/rh-footer-copyright.js	357 B
./elements/rh-footer/rh-footer-links.js	1.1 kB
./elements/rh-footer/rh-footer-social-link.js	1.04 kB
./elements/rh-footer/rh-footer-universal.js	4 kB
./elements/rh-footer/rh-footer.js	4.67 kB
./elements/rh-health-index/rh-health-index.js	2.41 kB
./elements/rh-icon/rh-icon.js	2.49 kB
./elements/rh-icon/ssr.js	181 B
./elements/rh-jump-links/context.js	179 B
./elements/rh-jump-links/rh-jump-link.js	1.5 kB
./elements/rh-jump-links/rh-jump-links-list.js	1.17 kB
./elements/rh-jump-links/rh-jump-links.js	2.37 kB
./elements/rh-menu/rh-menu.js	1.22 kB
./elements/rh-navigation-primary/context.js	176 B
./elements/rh-navigation-primary/rh-navigation-primary-item-menu.js	1.03 kB
./elements/rh-navigation-primary/rh-navigation-primary-item.js	3.42 kB
./elements/rh-navigation-primary/rh-navigation-primary-overlay.js	534 B
./elements/rh-navigation-primary/rh-navigation-primary.js	7.24 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js	2.57 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js	1.31 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js	1.68 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js	562 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js	5.23 kB
./elements/rh-navigation-secondary/test/fixtures.js	769 B
./elements/rh-pagination/rh-pagination.js	5.53 kB
./elements/rh-progress-stepper/context.js	187 B
./elements/rh-progress-stepper/rh-progress-step.js	2.9 kB
./elements/rh-progress-stepper/rh-progress-stepper.js	3.77 kB
./elements/rh-scheme-toggle/rh-scheme-toggle.js	1.91 kB
./elements/rh-site-status/rh-site-status.js	2.39 kB
./elements/rh-skeleton/rh-skeleton.js	677 B
./elements/rh-skip-link/rh-skip-link.js	1.33 kB
./elements/rh-spinner/rh-spinner.js	1.31 kB
./elements/rh-stat/rh-stat.js	2.05 kB
./elements/rh-subnav/rh-subnav.js	2.46 kB
./elements/rh-surface/rh-surface.js	911 B
./elements/rh-surface/test/elements.js	763 B
./elements/rh-switch/rh-switch.js	2.89 kB
./elements/rh-table/rh-sort-button.js	1.39 kB
./elements/rh-table/rh-table.js	2.81 kB
./elements/rh-tabs/context.js	226 B
./elements/rh-tabs/rh-tab-panel.js	1 kB
./elements/rh-tabs/rh-tab.js	2.85 kB
./elements/rh-tabs/rh-tabs.js	3.63 kB
./elements/rh-tag/rh-tag.js	2.95 kB
./elements/rh-tile/rh-tile-group.js	1.78 kB
./elements/rh-tile/rh-tile.js	4.59 kB
./elements/rh-timestamp/rh-timestamp.js	991 B
./elements/rh-tooltip/rh-tooltip.js	3.03 kB
./elements/rh-video-embed/rh-video-embed.js	4.64 kB
./lib/color-palettes.js	851 B
./lib/context/headings/consumer.js	593 B
./lib/context/headings/provider.js	1.2 kB
./lib/elements/rh-context-demo/rh-context-demo.js	1.16 kB
./lib/elements/rh-context-picker/rh-context-picker.js	2.18 kB
./lib/environment.js	194 B
./lib/functions.js	175 B
./lib/I18nController.js	1.37 kB
./lib/ScreenSizeController.js	876 B
./lib/ssr-controller.js	201 B
./lib/themable.js	549 B
./react/rh-accordion/rh-accordion-header.js	199 B
./react/rh-accordion/rh-accordion-panel.js	185 B
./react/rh-accordion/rh-accordion.js	202 B
./react/rh-alert/rh-alert.js	184 B
./react/rh-announcement/rh-announcement.js	189 B
./react/rh-audio-player/rh-audio-player-about.js	191 B
./react/rh-audio-player/rh-audio-player-rate-stepper.js	199 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js	214 B
./react/rh-audio-player/rh-audio-player-subscribe.js	196 B
./react/rh-audio-player/rh-audio-player.js	183 B
./react/rh-audio-player/rh-cue.js	195 B
./react/rh-audio-player/rh-transcript.js	187 B
./react/rh-avatar/rh-avatar.js	173 B
./react/rh-back-to-top/rh-back-to-top.js	183 B
./react/rh-badge/rh-badge.js	174 B
./react/rh-blockquote/rh-blockquote.js	179 B
./react/rh-breadcrumb/rh-breadcrumb.js	179 B
./react/rh-button/rh-button.js	174 B
./react/rh-card/rh-card.js	172 B
./react/rh-chip/rh-chip-group.js	182 B
./react/rh-chip/rh-chip.js	187 B
./react/rh-code-block/rh-code-block.js	181 B
./react/rh-cta/rh-cta.js	170 B
./react/rh-dialog/rh-dialog.js	203 B
./react/rh-disclosure/rh-disclosure.js	192 B
./react/rh-footer/rh-footer-block.js	184 B
./react/rh-footer/rh-footer-copyright.js	187 B
./react/rh-footer/rh-footer-links.js	185 B
./react/rh-footer/rh-footer-social-link.js	193 B
./react/rh-footer/rh-footer-universal.js	188 B
./react/rh-footer/rh-footer.js	174 B
./react/rh-health-index/rh-health-index.js	184 B
./react/rh-icon/rh-icon.js	195 B
./react/rh-jump-links/rh-jump-link.js	183 B
./react/rh-jump-links/rh-jump-links-list.js	189 B
./react/rh-jump-links/rh-jump-links.js	195 B
./react/rh-menu/rh-menu.js	173 B
./react/rh-navigation-primary/rh-navigation-primary-item-menu.js	205 B
./react/rh-navigation-primary/rh-navigation-primary-item.js	198 B
./react/rh-navigation-primary/rh-navigation-primary-overlay.js	199 B
./react/rh-navigation-primary/rh-navigation-primary.js	189 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js	217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js	205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js	199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js	201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js	213 B
./react/rh-pagination/rh-pagination.js	178 B
./react/rh-progress-stepper/rh-progress-step.js	200 B
./react/rh-progress-stepper/rh-progress-stepper.js	186 B
./react/rh-scheme-toggle/rh-scheme-toggle.js	183 B
./react/rh-site-status/rh-site-status.js	181 B
./react/rh-skeleton/rh-skeleton.js	176 B
./react/rh-skip-link/rh-skip-link.js	181 B
./react/rh-spinner/rh-spinner.js	175 B
./react/rh-stat/rh-stat.js	171 B
./react/rh-subnav/rh-subnav.js	175 B
./react/rh-surface/rh-surface.js	175 B
./react/rh-switch/rh-switch.js	174 B
./react/rh-table/rh-sort-button.js	200 B
./react/rh-table/rh-table.js	174 B
./react/rh-tabs/rh-tab-panel.js	181 B
./react/rh-tabs/rh-tab.js	187 B
./react/rh-tabs/rh-tabs.js	174 B
./react/rh-tag/rh-tag.js	182 B
./react/rh-tile/rh-tile-group.js	183 B
./react/rh-tile/rh-tile.js	181 B
./react/rh-timestamp/rh-timestamp.js	176 B
./react/rh-tooltip/rh-tooltip.js	175 B
./react/rh-video-embed/rh-video-embed.js	227 B
./uxdot/ssr-failure-recoverable.js	581 B
./uxdot/uxdot-best-practice.js	812 B
./uxdot/uxdot-copy-button.js	1.24 kB
./uxdot/uxdot-copy-permalink.js	1.1 kB
./uxdot/uxdot-demo.js	2.74 kB
./uxdot/uxdot-example.js	1.14 kB
./uxdot/uxdot-feedback.js	882 B
./uxdot/uxdot-header.js	1.02 kB
./uxdot/uxdot-knob-attribute.js	3.53 kB
./uxdot/uxdot-masthead.js	1.36 kB
./uxdot/uxdot-pattern-ssr-controller-client.js	615 B
./uxdot/uxdot-pattern-ssr-controller-server.js	1.72 kB
./uxdot/uxdot-pattern-ssr-controller.js	213 B
./uxdot/uxdot-pattern.js	2.38 kB
./uxdot/uxdot-repo-status-checklist.js	1.39 kB
./uxdot/uxdot-repo-status-list.js	1.24 kB
./uxdot/uxdot-repo.js	867 B
./uxdot/uxdot-search.js	2.39 kB
./uxdot/uxdot-sidenav.js	2.79 kB
./uxdot/uxdot-spacer-tokens-table.js	2.46 kB
./uxdot/uxdot-toc.js	1.8 kB

_{compressed-size-action}

[marionnegp]

@bennypowers, can you explain what changed visually?

[bennypowers]

The idea of view transitions is to animate navigations between pages. So say you had a band website with several album thumbnails. You could click on a thumbnail to go to a page about that album, but instead of just blanking the page and loading the next one, you could animate the transition such that e.g. the cover art expands to fill the hero section.

So I'd toss the question back to design: how would you animate page transitions given this new technology?

[zeroedin]

@bennypowers, can you explain what changed visually?

@marionnegp, everything in the <main> tag should fade in/out when you navigate to a new page, smoothing out the page load a bit. That said, now that you mention it, the DP doesn't look like what I was seeing locally. I'll give it another look.

[marionnegp]

I was able to see the effect once I switched over to Safari. (Thanks, @zeroedin!)

Not sure what the specific transition should look like, but I'll keep an eye out for any possible RH examples.