Skip to content

Commit 90fb170

Browse files
chrisdavidmillschrisdavidmills
authored
Add view-transition-name: match-element demo (#311)
1 parent 82afb79 commit 90fb170

File tree

4 files changed

+292
-1
lines changed

4 files changed

+292
-1
lines changed

‎README.md‎

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

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

84-
- 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.
84+
- 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/)).
8585

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

‎view-transitions/match-element/index.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
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>View Transitions match-element demo</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<script src="script.js" defer></script>
9+
</head>
10+
<body>
11+
<h1>View Transitions match-element demo</h1>
12+
<main class="match-element-applied">
13+
<ul>
14+
<li>
15+
<h2><a href="#">One</a></h2>
16+
17+
<p class="summary">
18+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
19+
volutpat tristique urna, eget tincidunt nunc pulvinar sit amet.
20+
Maecenas quis enim ut enim rutrum sagittis a nec eros.
21+
</p>
22+
23+
<p class="body-text">
24+
Suspendisse id massa tellus. Donec interdum rutrum libero tincidunt
25+
consectetur. Cras neque purus, sodales nec semper quis, iaculis a
26+
nibh. Duis pulvinar nulla sit amet fringilla scelerisque. Vivamus
27+
efficitur dictum mauris tristique auctor. Mauris quis tortor eu nisi
28+
ornare dapibus. Praesent porttitor augue eget lobortis maximus.
29+
Quisque in erat non ligula tempus tristique eu non magna.
30+
Pellentesque nec vestibulum quam, sed tincidunt nibh. Donec quis
31+
porta metus.
32+
</p>
33+
</li>
34+
<li>
35+
<h2><a href="#">Two</a></h2>
36+
<p class="summary">
37+
Mauris efficitur mi vel ipsum scelerisque, et fringilla est
38+
efficitur. Sed varius egestas sem, sed dignissim magna ullamcorper
39+
ultrices. Morbi at viverra magna, vitae auctor urna.
40+
</p>
41+
42+
<p class="body-text">
43+
Sed tempor et dui in varius. Sed justo sapien, ultricies id augue
44+
in, viverra hendrerit nulla. Nunc tempor ex sed ex dictum lacinia.
45+
Donec euismod felis at mi lobortis, id facilisis dolor faucibus.
46+
Nulla facilisis vulputate quam semper pharetra. Aenean viverra at
47+
turpis et gravida. Morbi vitae nisi metus. Ut at elit vitae augue
48+
tristique luctus id eget libero. Nam tempor nunc id dui porta
49+
molestie. Duis egestas orci nunc, vel lacinia leo dictum in. Ut orci
50+
erat, ultricies in aliquet vitae, laoreet ac nulla. Duis pretium
51+
fringilla lectus, nec bibendum nisl. Nam cursus libero eu tellus
52+
luctus efficitur.
53+
</p>
54+
</li>
55+
<li>
56+
<h2><a href="#">Three</a></h2>
57+
<p class="summary">
58+
Ut et justo a lacus vulputate feugiat vitae in quam. Ut auctor lacus
59+
nec erat tincidunt lobortis. Duis accumsan quis ipsum ac varius. Sed
60+
sodales laoreet leo nec pretium.
61+
</p>
62+
63+
<p class="body-text">
64+
Suspendisse ac risus ac ligula semper convallis. Morbi feugiat
65+
elementum odio. Pellentesque pulvinar suscipit mattis. Phasellus
66+
rhoncus tempus justo, feugiat posuere ipsum rhoncus in. Ut at
67+
ultricies nunc. Duis sem orci, gravida sit amet interdum vel,
68+
vulputate quis eros. Pellentesque a tempor quam. Morbi eu lacinia
69+
velit. Praesent pretium, ipsum nec pretium ornare, arcu metus
70+
pellentesque elit, vel hendrerit arcu felis eu diam.
71+
</p>
72+
</li>
73+
74+
<li>
75+
<h2><a href="#">Four</a></h2>
76+
<p class="summary">
77+
Morbi eu lacinia velit. Praesent pretium, ipsum nec pretium ornare,
78+
arcu metus pellentesque elit, vel hendrerit arcu felis eu diam.
79+
</p>
80+
81+
<p class="body-text">
82+
Ut et justo a lacus vulputate feugiat vitae in quam. Ut auctor lacus
83+
nec erat tincidunt lobortis. Duis accumsan quis ipsum ac varius. Sed
84+
sodales laoreet leo nec pretium. Suspendisse ac risus ac ligula
85+
semper convallis. Morbi feugiat elementum odio. Pellentesque
86+
pulvinar suscipit mattis. Phasellus rhoncus tempus justo, feugiat
87+
posuere ipsum rhoncus in. Ut at ultricies nunc. Duis sem orci,
88+
gravida sit amet interdum vel, vulputate quis eros. Pellentesque a
89+
tempor quam. Morbi eu lacinia velit. Praesent pretium, ipsum nec
90+
pretium ornare, arcu metus pellentesque elit, vel hendrerit arcu
91+
felis eu diam.
92+
</p>
93+
</li>
94+
</ul>
95+
<article></article>
96+
</main>
97+
<form>
98+
<label for="match-element-checkbox"
99+
>Apply <code>view-transition-name: match-element</code> to list
100+
items?</label
101+
>
102+
<input type="checkbox" checked id="match-element-checkbox" />
103+
</form>
104+
</body>
105+
</html>

‎view-transitions/match-element/script.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
const mainElem = document.querySelector("main");
2+
let prevElem;
3+
let checkboxElem = document.querySelector("input");
4+
5+
// View transition code
6+
7+
function updateActiveItem(event) {
8+
const clickedElem = event.target.parentElement.parentElement;
9+
10+
clickedElem.className = "active-item";
11+
12+
if (prevElem === clickedElem) {
13+
prevElem.className = "";
14+
prevElem = undefined;
15+
} else if (prevElem) {
16+
prevElem.className = "";
17+
prevElem = clickedElem;
18+
} else {
19+
prevElem = clickedElem;
20+
}
21+
}
22+
23+
mainElem.addEventListener("click", (event) => {
24+
if (event.target.tagName !== "A") {
25+
return;
26+
}
27+
28+
if (!document.startViewTransition) {
29+
updateActiveItem(event);
30+
} else {
31+
const transition = document.startViewTransition(() =>
32+
updateActiveItem(event)
33+
);
34+
}
35+
});
36+
37+
// Update class on main to control whether match-element is applied
38+
39+
checkboxElem.addEventListener("change", () => {
40+
mainElem.classList.toggle("match-element-applied");
41+
});

‎view-transitions/match-element/style.css‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/* General styling */
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
html {
8+
font-family: Arial, Helvetica, sans-serif;
9+
height: 100%;
10+
}
11+
12+
body {
13+
margin: 0;
14+
height: inherit;
15+
}
16+
17+
h1 {
18+
text-align: center;
19+
margin: 0;
20+
height: 80px;
21+
line-height: 80px;
22+
}
23+
24+
h2 {
25+
margin: 0;
26+
}
27+
28+
ul {
29+
padding: 0;
30+
margin: 0;
31+
list-style-type: none;
32+
}
33+
34+
li {
35+
overflow: hidden;
36+
}
37+
38+
li .summary {
39+
font-weight: bold;
40+
}
41+
42+
li .body-text {
43+
display: none;
44+
}
45+
46+
li.active-item .body-text {
47+
display: block;
48+
}
49+
50+
li:nth-child(1) {
51+
background-color: #cbc0d3;
52+
border: 20px solid #cbc0d3;
53+
}
54+
55+
li:nth-child(2) {
56+
background-color: #efd3d7;
57+
border: 20px solid #efd3d7;
58+
}
59+
60+
li:nth-child(3) {
61+
background-color: #feeafa;
62+
border: 20px solid #feeafa;
63+
}
64+
65+
li:nth-child(4) {
66+
background-color: #dee2ff;
67+
border: 20px solid #dee2ff;
68+
}
69+
70+
/* Links */
71+
72+
a {
73+
text-decoration: none;
74+
color: rgb(0 0 255 / 0.8);
75+
}
76+
77+
a:hover,
78+
a:focus {
79+
color: rgb(100 100 255);
80+
}
81+
82+
/* Layout */
83+
84+
main {
85+
height: calc(100% - 80px);
86+
display: flex;
87+
gap: 10px;
88+
position: relative;
89+
}
90+
91+
ul {
92+
width: 300px;
93+
display: flex;
94+
flex-direction: column;
95+
gap: 10px;
96+
}
97+
98+
article {
99+
flex: 1;
100+
}
101+
102+
li {
103+
flex: 1;
104+
}
105+
106+
/* form/checkbox styles */
107+
108+
form {
109+
position: absolute;
110+
bottom: 0;
111+
right: 0;
112+
z-index: 2;
113+
background-color: white;
114+
padding: 10px;
115+
border: 1px solid black;
116+
}
117+
118+
/* UI update styles */
119+
120+
.active-item {
121+
position: absolute;
122+
z-index: 1;
123+
translate: 310px;
124+
width: calc(100% - 310px);
125+
height: 100%;
126+
}
127+
128+
.match-element-applied li {
129+
view-transition-name: match-element;
130+
}
131+
132+
/* View Transitions CSS */
133+
134+
/* Adjust view transition speed */
135+
136+
::view-transition-group(*) {
137+
animation-duration: 0.5s;
138+
}
139+
140+
/* Work around the differences in aspect-ratio of the before and after snapshots */
141+
142+
html::view-transition-old(*),
143+
html::view-transition-new(*) {
144+
height: 100%;
145+
}

0 commit comments

Comments
 (0)