Add cross-document view transitions demo (#265)

* Add cross-document view transitions demo * Fixes for pepelsbey review comments * small best practice updates that came up in the content tech review
mdn · Jun 23, 2024 · 4c1e311 · 4c1e311
1 parent 98c8bb8
commit 4c1e311
Show file tree

Hide file tree

Showing 17 changed files with 108 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -73,7 +73,7 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
 
 - The "web-storage" directory contains a basic demo to show usage of the Web Storage API. For more detail on how it works, read [Using the Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API). [View the demo live](https://mdn.github.io/dom-examples/web-storage/).
 
-- The "view-transitions" directory contains a basic demo to show usage of the [View Transitions API](https://developer.mozilla.org/docs/Web/API/View_Transitions_API). [View the demo live](https://mdn.github.io/dom-examples/view-transitions/).
+- The "view-transitions" directory contains demos to show usage of the [View Transitions API](https://developer.mozilla.org/docs/Web/API/View_Transitions_API), both for single-page app [View the SPA demo live](https://mdn.github.io/dom-examples/view-transitions/spa/) and multiple-page app [View the MPA demo live](https://mdn.github.io/dom-examples/view-transitions/mpa/) view transitions.
 
 - The "web-share" directory contains a basic demo to show usage of the [Web Share API](https://developer.mozilla.org/docs/Web/API/Navigator/share). [View the demo live](https://mdn.github.io/dom-examples/web-share/).
 

diff --git a/view-transitions/mpa/images/image1.jpg b/view-transitions/mpa/images/image1.jpg
diff --git a/view-transitions/mpa/images/image2.jpg b/view-transitions/mpa/images/image2.jpg
diff --git a/view-transitions/mpa/index.html b/view-transitions/mpa/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Cross-document view transition example: Page 1</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+  <p><a href="page2.html">Go to page 2</a></p>
+  <img src="images/image1.jpg" alt="A suspension bridge spanning a river, with a cityscape on the other side.">
+</body>
+
+</html>
diff --git a/view-transitions/mpa/page2.html b/view-transitions/mpa/page2.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Cross-document view transition example: Page 2</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+  <p><a href="index.html">Go back to page 1</a></p>
+  <img src="images/image2.jpg" alt="A large green tropical leaf in the middle of a jungle.">
+</body>
+
+</html>
diff --git a/view-transitions/mpa/styles.css b/view-transitions/mpa/styles.css
@@ -0,0 +1,74 @@
+/* Example layout */
+
+html {
+    font-family: Arial, Helvetica, sans-serif;
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    height: inherit;
+}
+
+img {
+    width: 100vw;
+    height: 100vh;
+    object-fit: cover;
+}
+
+p {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    font-size: 2rem;
+    padding: 20px;
+    margin: 0;
+    border-radius: 5px;
+    background-color: rgba(255 255 255 / 0.8);
+}
+
+/* Turn cross-document view-transitions on */
+/* Note that this at-rule is all that is needed to create the default cross-fade animation  */
+
+@view-transition {
+    navigation: auto;
+}
+
+/* Customize the default animation behavior */
+
+::view-transition-group(root) {
+    animation-duration: 0.5s;
+}
+
+/* Create a custom animation */
+
+@keyframes move-out {
+    from {
+        transform: translateY(0%);
+    }
+
+    to {
+        transform: translateY(-100%);
+    }
+}
+
+@keyframes move-in {
+    from {
+        transform: translateY(100%);
+    }
+
+    to {
+        transform: translateY(0%);
+    }
+}
+
+/* Apply the custom animation to the old and new page states */
+
+::view-transition-old(root) {
+    animation: 0.4s ease-in both move-out;
+
+}
+
+::view-transition-new(root) {
+    animation: 0.4s ease-in both move-in;
+}
diff --git a/view-transitions/images/jungle-coast.jpg → view-transitions/spa/images/jungle-coast.jpg b/view-transitions/images/jungle-coast.jpg → view-transitions/spa/images/jungle-coast.jpg
diff --git a/view-transitions/images/jungle-coast_th.jpg → ...ransitions/spa/images/jungle-coast_th.jpg b/view-transitions/images/jungle-coast_th.jpg → ...ransitions/spa/images/jungle-coast_th.jpg
diff --git a/view-transitions/images/tree-bird.jpg → view-transitions/spa/images/tree-bird.jpg b/view-transitions/images/tree-bird.jpg → view-transitions/spa/images/tree-bird.jpg
diff --git a/view-transitions/images/tree-bird_th.jpg → view-transitions/spa/images/tree-bird_th.jpg b/view-transitions/images/tree-bird_th.jpg → view-transitions/spa/images/tree-bird_th.jpg
diff --git a/...-transitions/images/view-from-the-sky.jpg → ...nsitions/spa/images/view-from-the-sky.jpg b/...-transitions/images/view-from-the-sky.jpg → ...nsitions/spa/images/view-from-the-sky.jpg
diff --git a/...ansitions/images/view-from-the-sky_th.jpg → ...tions/spa/images/view-from-the-sky_th.jpg b/...ansitions/images/view-from-the-sky_th.jpg → ...tions/spa/images/view-from-the-sky_th.jpg
diff --git a/view-transitions/images/watery-view.jpg → view-transitions/spa/images/watery-view.jpg b/view-transitions/images/watery-view.jpg → view-transitions/spa/images/watery-view.jpg
diff --git a/view-transitions/images/watery-view_th.jpg → ...transitions/spa/images/watery-view_th.jpg b/view-transitions/images/watery-view_th.jpg → ...transitions/spa/images/watery-view_th.jpg
diff --git a/view-transitions/index.html → view-transitions/spa/index.html b/view-transitions/index.html → view-transitions/spa/index.html
diff --git a/view-transitions/script.js → view-transitions/spa/script.js b/view-transitions/script.js → view-transitions/spa/script.js
diff --git a/view-transitions/style.css → view-transitions/spa/style.css b/view-transitions/style.css → view-transitions/spa/style.css
@@ -112,8 +112,7 @@ h1 {
 
 /* View Transitions CSS */
 
-::view-transition-old(root),
-::view-transition-new(root) {
+::view-transition-group(root) {
   animation-duration: 0.5s;
 }
 
@@ -123,8 +122,7 @@ figcaption {
 
 /* Simple final style */
 
-::view-transition-old(figure-caption),
-::view-transition-new(figure-caption) {
+::view-transition-group(figure-caption) {
   height: 100%;
 }
 
@@ -140,8 +138,7 @@ figcaption {
   to { transform: scaleX(0); }
 }
 
-::view-transition-old(figure-caption),
-::view-transition-new(figure-caption) {
+::view-transition-group(figure-caption) {
   height: auto;
   right: 0;
   left: auto;