Skip to content

Commit 1da7c80

Browse files
chrisdavidmillschrisdavidmills
authored
3rd attempt at trying to push view transition types examples (#367)
1 parent bac967a commit 1da7c80

File tree

18 files changed

+1127
-0
lines changed

18 files changed

+1127
-0
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,8 @@ Do not specify supported browsers and their versions in code comments or prose,
112112

113113
- The "viewport-segments-api" directory contains an example demonstrating how to use the [Viewport Segments API](https://developer.mozilla.org/docs/Web/API/Viewport_Segments_API). [Run the example live](https://mdn.github.io/dom-examples/viewport-segments-api/).
114114

115+
- The "view-transitions" directory contains examples and demos of the [View Transition API](https://developer.mozilla.org/docs/Web/API/View_Transition_API) standard. Go to the [View transition API demo index](https://mdn.github.io/dom-examples/view-transitions/) to see what's available.
116+
115117
- The "visual-viewport-api" directory contains a basic demo to show usage of the Visual Viewport API. For more details on how it works, read [Visual Viewport API](https://developer.mozilla.org/docs/Web/API/Visual_Viewport_API). [View the demo live](https://mdn.github.io/dom-examples/visual-viewport-api/).
116118

117119
- The "web-animations-api" directory contains [Web Animation API](https://developer.mozilla.org/docs/Web/API/Web_Animations_API) demos. See the [web animations README](web-animations-api/README.md) for more information.

‎view-transitions/README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# MDN View Transition API examples
2+
3+
This set of examples demonstrates usage of the [View Transition API](https://developer.mozilla.org/docs/Web/API/View_Transition_API) (also see the [specification](https://drafts.csswg.org/css-view-transitions-2/)).
4+
5+
## Basic examples
6+
7+
- [SPA example](spa/): Demonstrates basic view transition usage in a SPA image gallery.
8+
- [MPA example](mpa/): Demonstrates basic view transition usage in MPA.
9+
- [MPA homepage example](mpa-homepage/): Another MPA view transitions example.
10+
- [MPA homepage example](match-element/): Demonstrates usage of the `match-element` value of the `view-transition-name` property
11+
12+
## View transition types examples
13+
14+
- [SPA transition types gallery](spa-gallery-transition-types/): SPA image gallery that uses transition types to apply different transition animations when the images are moved between using the prev button, next button, and by clicking directly on an image.
15+
- [MPA transition types example](mpa-chapter-nav-transition-types/): Story app with a chapter on each page. Demonstrates how to apply view transition animations across pages selectively with a transition type applied using the `@view-transition` at-rule.
16+
- [MPA multiple transition types example](mpa-chapter-nav-multiple-transition-types/): Story app with a chapter on each page. Demonstrates how to apply different view transition animations across pages selectively with different transition types. The transition type is determined on the fly with JavaScript during the navigation.

‎view-transitions/mpa-chapter-nav-multiple-transition-types/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Chapter 1: Table of contents MPA view transition types</title>
5+
<link href="style.css" rel="stylesheet" />
6+
<script defer src="index.js"></script>
7+
</head>
8+
<body>
9+
<nav id="toc">
10+
<ol>
11+
<li>Chapter 1</li>
12+
<li><a href="index2.html">Chapter 2</a></li>
13+
<li><a href="index3.html">Chapter 3</a></li>
14+
<li><a href="index4.html">Chapter 4</a></li>
15+
<li><a href="index5.html">Chapter 5</a></li>
16+
</ol>
17+
</nav>
18+
<section>
19+
<h1>Chapter 1</h1>
20+
21+
<figure>
22+
<img
23+
src="https://mdn.github.io/shared-assets/images/examples/learn/gallery/pic2.jpg"
24+
alt="Rock that looks like a wave" />
25+
<figcaption>Rock that looks like a wave</figcaption>
26+
</figure>
27+
28+
<p>
29+
I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea
30+
narwhal asymmetrical. Af health goth shaman in slow-carb godard echo
31+
park. Tofu farm-to-table labore salvia tote bag food truck dolore
32+
gluten-free poutine kombucha fanny pack +1 franzen lyft fugiat.
33+
Chicharrones next level jianbing, enamel pin seitan cardigan bruh
34+
snackwave beard incididunt dolor lumbersexual before they sold out
35+
dreamcatcher single-origin coffee.
36+
</p>
37+
</section>
38+
</body>
39+
</html>

‎view-transitions/mpa-chapter-nav-multiple-transition-types/index.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
const determineTransitionType = (oldNavigationEntry, newNavigationEntry) => {
2+
// Grab the current and destination URLs from the provided navigation entries
3+
const currentURL = oldNavigationEntry.url;
4+
const destinationURL = newNavigationEntry.url;
5+
6+
// Find the index number of a page
7+
function determinePageIndex(url) {
8+
// Split the URL at the "/" character
9+
const array = url.split("/");
10+
// Grab the last array item, which should contain the end slug
11+
const slug = array[array.length - 1];
12+
// If the URL doesn't include the HTML file name, return index 0
13+
if (slug.indexOf("html") === -1) {
14+
return 0;
15+
} else {
16+
// Extract the number from the file name, e.g. index1.html -> 1
17+
const pageIndex = slug.replace("index", "").replace(".html", "");
18+
// If it doesn't contain a number (i.e. index.html), return 0
19+
if (pageIndex === "") {
20+
return 0;
21+
} else {
22+
// Return the number
23+
return parseInt(pageIndex);
24+
}
25+
}
26+
}
27+
28+
// Get the page index of the current and destination URLs
29+
const currentPageIndex = determinePageIndex(currentURL);
30+
const destinationPageIndex = determinePageIndex(destinationURL);
31+
32+
// Return "forwards" or "backwards" depending on whether currentPageIndex
33+
// is bigger or smaller than destinationPageIndex
34+
if (currentPageIndex > destinationPageIndex) {
35+
return "backwards";
36+
} else if (currentPageIndex < destinationPageIndex) {
37+
return "forwards";
38+
} else {
39+
// If the page is reloaded, neither of the above conditions will be true
40+
// In this case, we don't need a type, so return "no-type"
41+
return "no-type";
42+
}
43+
};
44+
45+
window.addEventListener("pageswap", async (e) => {
46+
// Grab the old and new navigation entries on the outgoing page from the pageswap event object's
47+
// activation property, pass these to the determineTransitionType() function to determine the type
48+
const transitionType = determineTransitionType(
49+
e.activation.from,
50+
e.activation.entry
51+
);
52+
console.log(`pageSwap: ${transitionType}`);
53+
// Add the type to the active ViewTransition via its types property
54+
e.viewTransition.types.add(transitionType);
55+
});
56+
57+
window.addEventListener("pagereveal", async (e) => {
58+
// Grab the old and new navigation entries on the incoming page from the Navigation.activation
59+
// object, pass these to the determineTransitionType() function to determine the type
60+
const transitionType = determineTransitionType(
61+
navigation.activation.from,
62+
navigation.activation.entry
63+
);
64+
65+
console.log(`pageReveal: ${transitionType}`);
66+
// If the type is "no-type", don't add it to the transition types
67+
if (transitionType !== "no-type") {
68+
// Add the type to the active ViewTransition via its types property
69+
e.viewTransition.types.add(transitionType);
70+
}
71+
});

‎view-transitions/mpa-chapter-nav-multiple-transition-types/index2.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Chapter 2: Table of contents MPA view transition types</title>
5+
<link href="style.css" rel="stylesheet" />
6+
<script defer src="index.js"></script>
7+
</head>
8+
<body>
9+
<nav id="toc">
10+
<ol>
11+
<li><a href="index.html">Chapter 1</a></li>
12+
<li>Chapter 2</li>
13+
<li><a href="index3.html">Chapter 3</a></li>
14+
<li><a href="index4.html">Chapter 4</a></li>
15+
<li><a href="index5.html">Chapter 5</a></li>
16+
</ol>
17+
</nav>
18+
<section>
19+
<h1>Chapter 2</h1>
20+
<p>
21+
I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea
22+
narwhal asymmetrical. Af health goth shaman in slow-carb godard echo
23+
park. Tofu farm-to-table labore salvia tote bag food truck dolore
24+
gluten-free poutine kombucha fanny pack +1 franzen lyft fugiat.
25+
Chicharrones next level jianbing, enamel pin seitan cardigan bruh
26+
snackwave beard incididunt dolor lumbersexual before they sold out
27+
dreamcatcher single-origin coffee.
28+
</p>
29+
<p>
30+
Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore
31+
bespoke. Art party quinoa stumptown celiac, sed chillwave 3 wolf moon.
32+
Scenester fugiat pariatur, seitan selvage excepteur chambray yuccie
33+
artisan. Sunt schlitz ugh, et jawn sus four loko pop-up post-ironic
34+
photo booth occaecat deep v 8-bit tacos marfa. Tattooed ipsum tbh
35+
occaecat umami four loko adaptogen taiyaki truffaut hexagon neutral milk
36+
hotel.
37+
</p>
38+
<p>
39+
Chillwave gastropub chartreuse deserunt butcher umami meditation ennui.
40+
Sus post-ironic affogato irony non succulents la croix labore tousled.
41+
Tumblr selvage sartorial taxidermy yes plz fashion axe deserunt. Big
42+
mood humblebrag hammock meditation, four dollar toast vice bruh minim
43+
tacos chartreuse drinking vinegar sunt yes plz YOLO cred. Synth
44+
chartreuse est, wayfarers pop-up ut gorpcore consequat ullamco meh lyft
45+
crucifix selvage occaecat.
46+
</p>
47+
<p>
48+
Austin mukbang scenester pabst, kale chips helvetica in selvage tote bag
49+
drinking vinegar craft beer pickled meh subway tile +1. Big mood kogi
50+
blog, vape hella seitan veniam.
51+
</p>
52+
</section>
53+
</body>
54+
</html>

‎view-transitions/mpa-chapter-nav-multiple-transition-types/index3.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Chapter 3: Table of contents MPA view transition types</title>
5+
<link href="style.css" rel="stylesheet" />
6+
<script defer src="index.js"></script>
7+
</head>
8+
<body>
9+
<nav id="toc">
10+
<ol>
11+
<li><a href="index.html">Chapter 1</a></li>
12+
<li><a href="index2.html">Chapter 2</a></li>
13+
<li>Chapter 3</li>
14+
<li><a href="index4.html">Chapter 4</a></li>
15+
<li><a href="index5.html">Chapter 5</a></li>
16+
</ol>
17+
</nav>
18+
<section>
19+
<h1>Chapter 3</h1>
20+
<p>
21+
Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore
22+
bespoke. Art party quinoa stumptown celiac, sed chillwave 3 wolf moon.
23+
Scenester fugiat pariatur, seitan selvage excepteur chambray yuccie
24+
artisan. Sunt schlitz ugh, et jawn sus four loko pop-up post-ironic
25+
photo booth occaecat deep v 8-bit tacos marfa. Tattooed ipsum tbh
26+
occaecat umami four loko adaptogen taiyaki truffaut hexagon neutral milk
27+
hotel.
28+
</p>
29+
<p>
30+
Chillwave gastropub chartreuse deserunt butcher umami meditation ennui.
31+
Sus post-ironic affogato irony non succulents la croix labore tousled.
32+
Tumblr selvage sartorial taxidermy yes plz fashion axe deserunt. Big
33+
mood humblebrag hammock meditation, four dollar toast vice bruh minim
34+
tacos chartreuse drinking vinegar sunt yes plz YOLO cred. Synth
35+
chartreuse est, wayfarers pop-up ut gorpcore consequat ullamco meh lyft
36+
crucifix selvage occaecat.
37+
</p>
38+
<p>
39+
Austin mukbang scenester pabst, kale chips helvetica in selvage tote bag
40+
drinking vinegar craft beer pickled meh subway tile +1. Big mood kogi
41+
blog, vape hella seitan veniam.
42+
</p>
43+
44+
<p>
45+
I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea
46+
narwhal asymmetrical. Af health goth shaman in slow-carb godard echo
47+
park. Tofu farm-to-table labore salvia tote bag food truck dolore
48+
gluten-free poutine kombucha fanny pack +1 franzen lyft fugiat.
49+
Chicharrones next level jianbing, enamel pin seitan cardigan bruh
50+
snackwave beard incididunt dolor lumbersexual before they sold out
51+
dreamcatcher single-origin coffee.
52+
</p>
53+
</section>
54+
</body>
55+
</html>

‎view-transitions/mpa-chapter-nav-multiple-transition-types/index4.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Chapter 4: Table of contents MPA view transition types</title>
5+
<link href="style.css" rel="stylesheet" />
6+
<script defer src="index.js"></script>
7+
</head>
8+
<body>
9+
<nav id="toc">
10+
<ol>
11+
<li><a href="index.html">Chapter 1</a></li>
12+
<li><a href="index2.html">Chapter 2</a></li>
13+
<li><a href="index3.html">Chapter 3</a></li>
14+
<li>Chapter 4</li>
15+
<li><a href="index5.html">Chapter 5</a></li>
16+
</ol>
17+
</nav>
18+
<section>
19+
<h1>Chapter 4</h1>
20+
<p>
21+
Chillwave gastropub chartreuse deserunt butcher umami meditation ennui.
22+
Sus post-ironic affogato irony non succulents la croix labore tousled.
23+
Tumblr selvage sartorial taxidermy yes plz fashion axe deserunt. Big
24+
mood humblebrag hammock meditation, four dollar toast vice bruh minim
25+
tacos chartreuse drinking vinegar sunt yes plz YOLO cred. Synth
26+
chartreuse est, wayfarers pop-up ut gorpcore consequat ullamco meh lyft
27+
crucifix selvage occaecat.
28+
</p>
29+
<p>
30+
I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea
31+
narwhal asymmetrical. Af health goth shaman in slow-carb godard echo
32+
park. Tofu farm-to-table labore salvia tote bag food truck dolore
33+
gluten-free poutine kombucha fanny pack +1 franzen lyft fugiat.
34+
Chicharrones next level jianbing, enamel pin seitan cardigan bruh
35+
snackwave beard incididunt dolor lumbersexual before they sold out
36+
dreamcatcher single-origin coffee.
37+
</p>
38+
39+
<p>
40+
Austin mukbang scenester pabst, kale chips helvetica in selvage tote bag
41+
drinking vinegar craft beer pickled meh subway tile +1. Big mood kogi
42+
blog, vape hella seitan veniam.
43+
</p>
44+
45+
<p>
46+
Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore
47+
bespoke. Art party quinoa stumptown celiac, sed chillwave 3 wolf moon.
48+
Scenester fugiat pariatur, seitan selvage excepteur chambray yuccie
49+
artisan. Sunt schlitz ugh, et jawn sus four loko pop-up post-ironic
50+
photo booth occaecat deep v 8-bit tacos marfa. Tattooed ipsum tbh
51+
occaecat umami four loko adaptogen taiyaki truffaut hexagon neutral milk
52+
hotel.
53+
</p>
54+
</section>
55+
</body>
56+
</html>

‎view-transitions/mpa-chapter-nav-multiple-transition-types/index5.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Chapter 5: Table of contents MPA view transition types</title>
5+
<link href="style.css" rel="stylesheet" />
6+
<script defer src="index.js"></script>
7+
</head>
8+
<body>
9+
<nav id="toc">
10+
<ol>
11+
<li><a href="index.html">Chapter 1</a></li>
12+
<li><a href="index2.html">Chapter 2</a></li>
13+
<li><a href="index3.html">Chapter 3</a></li>
14+
<li><a href="index4.html">Chapter 4</a></li>
15+
<li>Chapter 5</li>
16+
</ol>
17+
</nav>
18+
<section>
19+
<h1>Chapter 5</h1>
20+
<p>
21+
Austin mukbang scenester pabst, kale chips helvetica in selvage tote bag
22+
drinking vinegar craft beer pickled meh subway tile +1. Big mood kogi
23+
blog, vape hella seitan veniam.
24+
</p>
25+
<p>
26+
I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea
27+
narwhal asymmetrical. Af health goth shaman in slow-carb godard echo
28+
park. Tofu farm-to-table labore salvia tote bag food truck dolore
29+
gluten-free poutine kombucha fanny pack +1 franzen lyft fugiat.
30+
Chicharrones next level jianbing, enamel pin seitan cardigan bruh
31+
snackwave beard incididunt dolor lumbersexual before they sold out
32+
dreamcatcher single-origin coffee.
33+
</p>
34+
<p>
35+
Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore
36+
bespoke. Art party quinoa stumptown celiac, sed chillwave 3 wolf moon.
37+
Scenester fugiat pariatur, seitan selvage excepteur chambray yuccie
38+
artisan. Sunt schlitz ugh, et jawn sus four loko pop-up post-ironic
39+
photo booth occaecat deep v 8-bit tacos marfa. Tattooed ipsum tbh
40+
occaecat umami four loko adaptogen taiyaki truffaut hexagon neutral milk
41+
hotel.
42+
</p>
43+
44+
<p>
45+
Chillwave gastropub chartreuse deserunt butcher umami meditation ennui.
46+
Sus post-ironic affogato irony non succulents la croix labore tousled.
47+
Tumblr selvage sartorial taxidermy yes plz fashion axe deserunt. Big
48+
mood humblebrag hammock meditation, four dollar toast vice bruh minim
49+
tacos chartreuse drinking vinegar sunt yes plz YOLO cred. Synth
50+
chartreuse est, wayfarers pop-up ut gorpcore consequat ullamco meh lyft
51+
crucifix selvage occaecat.
52+
</p>
53+
</section>
54+
</body>
55+
</html>

0 commit comments

Comments
 (0)