Add cross-document view transitions demo

mdn · Mar 15, 2024 · 52ca0c6 · 52ca0c6
1 parent 929e396
commit 52ca0c6
Show file tree

Hide file tree

Showing 18 changed files with 119 additions and 1 deletion.
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,16 @@
+<!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">
+  <script defer src="index.js"></script>
+</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/index.js b/view-transitions/mpa/index.js
@@ -0,0 +1,13 @@
+console.log("script loaded");
+
+window.addEventListener("pageswap", event => {
+    console.log("pageswap fired");
+    // event.viewTransition.skipTransition();
+});
+
+
+window.addEventListener("pagereveal", event => {
+    console.log("pagereveal fired");
+    // event.viewTransition.skipTransition();
+});
+
diff --git a/view-transitions/mpa/page2.html b/view-transitions/mpa/page2.html
@@ -0,0 +1,16 @@
+<!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">
+  <script defer src="index.js"></script>
+</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,73 @@
+/* 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 */
+
+/* ::view-transition-old(root),
+::view-transition-new(root) {
+    animation-duration: 0.5s;
+} */
+
+/* create a new animation */
+
+@keyframes move-out {
+    from {
+        transform: translateY(0%);
+    }
+
+    to {
+        transform: translateY(-100%);
+    }
+}
+
+@keyframes move-in {
+    from {
+        transform: translateY(100%);
+    }
+
+    to {
+        transform: translateY(0%);
+    }
+}
+
+::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