Skip to content

Commit c95f97d

Browse files
pepelsbeypepelsbey
authored
Simplify mpa-homepage demo, feature in README (#340)
1 parent e7cd60c commit c95f97d

File tree

8 files changed

+49
-62
lines changed

8 files changed

+49
-62
lines changed

‎README.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,13 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
109109

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

112-
- The "view-transitions" directory contains demos to show usage of the [View Transitions API](https://developer.mozilla.org/docs/Web/API/View_Transitions_API), 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. We've also included a demo to demonstrate the effect of the `view-transition-name` property `match-element` value ([View the `match-element` demo live](https://mdn.github.io/dom-examples/view-transitions/match-element/)).
112+
- The "view-transitions" directory contains demos to show usage of the [View Transitions API](https://developer.mozilla.org/docs/Web/API/View_Transitions_API):
113+
114+
- View transitions in a [single-page app](https://mdn.github.io/dom-examples/view-transitions/spa/)
115+
- View transitions in a [multiple-page app](https://mdn.github.io/dom-examples/view-transitions/mpa/)
116+
- Another example of view transitions in a [simple multiple-page app](https://mdn.github.io/dom-examples/view-transitions/mpa-homepage/)
117+
- [The `match-element` value](https://mdn.github.io/dom-examples/view-transitions/match-element/) for the `view-transition-name` property
118+
113119

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

‎view-transitions/mpa-example-2/hobbies.html‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎view-transitions/mpa-example-2/index.html‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

view-transitions/mpa-example-2/hobbies.css renamed to view-transitions/mpa-homepage/hobbies.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
@view-transition {
2-
navigation: auto;
3-
}
4-
51
@keyframes slide-from-right {
62
from {
73
transform: translateX(100vw);

‎view-transitions/mpa-homepage/hobbies.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Cross-document view transition example: My hobbies</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link rel="stylesheet" href="hobbies.css" />
9+
</head>
10+
<body class="hobbies">
11+
<h1>🧶 My hobbies</h1>
12+
<p>
13+
When I'm not busy napping, I love to play with yarn and chase laser
14+
pointers. I'm also an avid bird watcher.
15+
</p>
16+
<p>
17+
Thank you for your interest! You can return to the <a href="index.html">homepage</a> now.
18+
</p>
19+
</body>
20+
</html>

view-transitions/mpa-example-2/index.css renamed to view-transitions/mpa-homepage/index.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
@view-transition {
2-
navigation: auto;
3-
}
4-
51
@keyframes slide-to-right {
62
from {
73
transform: translateX(0);

‎view-transitions/mpa-homepage/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Cross-document view transition example: Homepage</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link rel="stylesheet" href="index.css" />
9+
</head>
10+
<body class="index">
11+
<h1>🏡 Homepage</h1>
12+
<p>
13+
Hello, my name is Mrs. Whiskers. Welcome to my personal website!
14+
</p>
15+
<p>
16+
Everyone needs a place on the web, even a cat. If you're curious, you can find out more about my <a href="hobbies.html">hobbies</a>.
17+
</p>
18+
</body>
19+
</html>

view-transitions/mpa-example-2/style.css renamed to view-transitions/mpa-homepage/style.css

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
*,
2-
*:before,
3-
*:after {
4-
box-sizing: border-box;
1+
@view-transition {
2+
navigation: auto;
53
}
64

75
body {
@@ -10,6 +8,7 @@ body {
108
padding: 20px;
119
text-align: center;
1210
margin: auto;
11+
box-sizing: border-box;
1312
line-height: 1.5;
1413

1514
&.index {

0 commit comments

Comments
 (0)