8000 Add view-transitions mpa-example-2 with slide animations (#334) · mdn/dom-examples@9fde42e · GitHub
[go: up one dir, main page]
Skip to content

Commit 9fde42e

Browse files
yashrajbhartidipikabhpepelsbey
authored
Add view-transitions mpa-example-2 with slide animations (#334)
* Add view-transitions mpa-example-2 with slide animations - Add new cross-document view transition example with slide animations - Includes index.html and page2.html with proper navigation - Features slideToRight and slideFromRight keyframe animations - Uses modern CSS with oklch colors and system fonts - Follows existing dom-examples patterns and structure * Update view-transitions/mpa-example-2/index.html Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update view-transitions/mpa-example-2/index.html Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update view-transitions/mpa-example-2/page2.html Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * file rename and animations keyframe in kebab case * Format using Prettier * Update view-transitions/mpa-example-2/style.css Co-authored-by: Vadim Makeev <hi@pepelsbey.dev> * Update view-transitions/mpa-example-2/index.html Co-authored-by: Vadim Makeev <hi@pepelsbey.dev> * Update view-transitions/mpa-example-2/about.html Co-authored-by: Vadim Makeev <hi@pepelsbey.dev> * Update view-transitions/mpa-example-2/about.html Co-authored-by: Vadim Makeev <hi@pepelsbey.dev> * Update view-transitions/mpa-example-2/about.html Co-authored-by: Vadim Makeev <hi@pepelsbey.dev> * Update view-transitions/mpa-example-2/index.html Co-authored-by: Vadim Makeev <hi@pepelsbey.dev> * Rename files in mpa-example-2: about.html → hobbies.html, page1.css → index.css, page2.css → hobbies.css * Update view-transitions/mpa-example-2/hobbies.html Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update view-transitions/mpa-example-2/index.html Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update view-transitions/mpa-example-2/hobbies.html Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update view-transitions/mpa-example-2/index.html Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update view-transitions/mpa-example-2/hobbies.html Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> --------- Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> Co-authored-by: Vadim Makeev <vmakeev@mozilla.com> Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>
1 parent 3d99b9e commit 9fde42e

File tree

5 files changed

+129
-0
lines changed

5 files changed

+129
-0
lines changed

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@view-transition {
2+
navigation: auto;
3+
}
4+
5+
@keyframes slide-from-right {
6+
from {
7+
transform: translateX(100vw);
8+
}
9+
10+
to {
11+
transform: translateX(0);
12+
}
13+
}
14+
15+
::view-transition-old(root),
16+
::view-transition-new(root) {
17+
mix-blend-mode: normal;
18+
}
19+
20+
::view-transition-old(root) {
21+
animation: none;
22+
}
23+
24+
::view-transition-new(root) {
25+
animation: slide-from-right 0.3s;
26+
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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 2: Page 2</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link rel="stylesheet" href="hobbies.css" />
9+
</head>
10+
<body class="hobbies">
11+
<section>
12+
<h1>🧶 My Hobbies</h1>
13+
<p>
14+
When I'm not busy napping, I love to play with yarn and chase laser
15+
pointers. I'm also an avid bird watcher.
16+
</p>
17+
<p>
18+
Thank you for your interest!
19+
You can return to the <a href="index.html">homepage</a> now.
20+
</p>
21+
</section>
22+
</body>
23+
</html>

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@view-transition {
2+
navigation: auto;
3+
}
4+
5+
@keyframes slide-to-right {
6+
from {
7+
transform: translateX(0);
8+
z-index: 2;
9+
}
10+
11+
to {
12+
transform: translateX(100vw);
13+
z-index: 2;
14+
}
15+
}
16+
17+
::view-transition-old(root),
18+
::view-transition-new(root) {
19+
mix-blend-mode: normal;
20+
}
21+
22+
::view-transition-old(root) {
23+
animation: slide-to-right 0.3s;
24+
}
25+
26+
::view-transition-new(root) {
27+
animation: none;
28+
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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 2: Page 1</title>
7+
<link rel="stylesheet" href="index.css" />
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body class="index">
11+
<section>
12+
<h1>🏡 Homepage</h1>
13+
<p>
14+
Hello, my name is Mrs. Whiskers. Welcome to my personal website!
15+
</p>
16+
<p>
17+
<div>
18+
Everyone needs a place on the web, even a cat.
19+
</div>
20+
<div>
21+
If you're curious, you can find out more about my <a href="hobbies.html">hobbies</a>.
22+
</div>
23+
</p>
24+
</section>
25+
</body>
26+
</html>

‎view-transitions/mpa-example-2/style.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
*,
2+
*:before,
3+
*:after {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: system-ui;
9+
max-inline-size: 400px;
10+
padding: 20px;
11+
text-align: center;
12+
margin: auto;
13+
line-height: 1.5;
14+
15+
&.index {
16+
background-color: oklch(0.9529 0.0444 332);
17+
}
18+
19+
&.hobbies {
20+
background-color: oklch(0.9588 0.0617 184.24);
21+
}
22+
}
23+
24+
a {
25+
color: oklch(0.0867 0.0419 261.53);
26+
}

0 commit comments

Comments
 (0)
0