diff --git a/README.md b/README.md index 184c2693..38ed432c 100644 --- 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 new file mode 100644 index 00000000..c3622549 Binary files /dev/null and b/view-transitions/mpa/images/image1.jpg differ diff --git a/view-transitions/mpa/images/image2.jpg b/view-transitions/mpa/images/image2.jpg new file mode 100644 index 00000000..1ad42b4b Binary files /dev/null and b/view-transitions/mpa/images/image2.jpg differ diff --git a/view-transitions/mpa/index.html b/view-transitions/mpa/index.html new file mode 100644 index 00000000..6ff7286c --- /dev/null +++ b/view-transitions/mpa/index.html @@ -0,0 +1,15 @@ + + + + + + Cross-document view transition example: Page 1 + + + + +

Go to page 2

+ A suspension bridge spanning a river, with a cityscape on the other side. + + + diff --git a/view-transitions/mpa/page2.html b/view-transitions/mpa/page2.html new file mode 100644 index 00000000..9b1fba20 --- /dev/null +++ b/view-transitions/mpa/page2.html @@ -0,0 +1,15 @@ + + + + + + Cross-document view transition example: Page 2 + + + + +

Go back to page 1

+ A large green tropical leaf in the middle of a jungle. + + + diff --git a/view-transitions/mpa/styles.css b/view-transitions/mpa/styles.css new file mode 100644 index 00000000..910dbc42 --- /dev/null +++ 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 b/view-transitions/spa/images/jungle-coast.jpg similarity index 100% rename from view-transitions/images/jungle-coast.jpg rename to view-transitions/spa/images/jungle-coast.jpg diff --git a/view-transitions/images/jungle-coast_th.jpg b/view-transitions/spa/images/jungle-coast_th.jpg similarity index 100% rename from view-transitions/images/jungle-coast_th.jpg rename to view-transitions/spa/images/jungle-coast_th.jpg diff --git a/view-transitions/images/tree-bird.jpg b/view-transitions/spa/images/tree-bird.jpg similarity index 100% rename from view-transitions/images/tree-bird.jpg rename to view-transitions/spa/images/tree-bird.jpg diff --git a/view-transitions/images/tree-bird_th.jpg b/view-transitions/spa/images/tree-bird_th.jpg similarity index 100% rename from view-transitions/images/tree-bird_th.jpg rename to view-transitions/spa/images/tree-bird_th.jpg diff --git a/view-transitions/images/view-from-the-sky.jpg b/view-transitions/spa/images/view-from-the-sky.jpg similarity index 100% rename from view-transitions/images/view-from-the-sky.jpg rename to view-transitions/spa/images/view-from-the-sky.jpg diff --git a/view-transitions/images/view-from-the-sky_th.jpg b/view-transitions/spa/images/view-from-the-sky_th.jpg similarity index 100% rename from view-transitions/images/view-from-the-sky_th.jpg rename to view-transitions/spa/images/view-from-the-sky_th.jpg diff --git a/view-transitions/images/watery-view.jpg b/view-transitions/spa/images/watery-view.jpg similarity index 100% rename from view-transitions/images/watery-view.jpg rename to view-transitions/spa/images/watery-view.jpg diff --git a/view-transitions/images/watery-view_th.jpg b/view-transitions/spa/images/watery-view_th.jpg similarity index 100% rename from view-transitions/images/watery-view_th.jpg rename to view-transitions/spa/images/watery-view_th.jpg diff --git a/view-transitions/index.html b/view-transitions/spa/index.html similarity index 100% rename from view-transitions/index.html rename to view-transitions/spa/index.html diff --git a/view-transitions/script.js b/view-transitions/spa/script.js similarity index 100% rename from view-transitions/script.js rename to view-transitions/spa/script.js diff --git a/view-transitions/style.css b/view-transitions/spa/style.css similarity index 89% rename from view-transitions/style.css rename to view-transitions/spa/style.css index 412b44ad..ce0a7330 100644 --- a/view-transitions/style.css +++ b/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;