Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DO NOT MERGE YET: Add cross-document view transitions demo #265

Merged
merged 6 commits into from
Jun 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
pepelsbey marked this conversation as resolved.
Show resolved Hide resolved

- 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/).

Expand Down
Binary file added view-transitions/mpa/images/image1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added view-transitions/mpa/images/image2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions view-transitions/mpa/index.html
Original file line number Diff line number Diff line change
@@ -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>
15 changes: 15 additions & 0 deletions view-transitions/mpa/page2.html
Original file line number Diff line number Diff line change
@@ -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>
74 changes: 74 additions & 0 deletions view-transitions/mpa/styles.css
Original file line number Diff line number Diff line change
@@ -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;
}
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,7 @@ h1 {

/* View Transitions CSS */

::view-transition-old(root),
::view-transition-new(root) {
::view-transition-group(root) {
animation-duration: 0.5s;
}

Expand All @@ -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%;
}

Expand All @@ -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;
Expand Down