Skip to content

Commit 9b34284

Browse files
martrappmartrapp
committed
Add initial implementation of pseudo-element view transitions
1 parent f9969cb commit 9b34284

1 file changed

Lines changed: 100 additions & 0 deletions

File tree

‎src/pages/basics/_pseudo.astro‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
---
2+
3+
---
4+
5+
<!doctype html>
6+
<html lang="en">
7+
<head>
8+
<meta charset="UTF-8" />
9+
<meta name="viewport" content="width=device-width" />
10+
<meta name="color-scheme" content="light dark" />
11+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
12+
<title>Grand Hotel</title>
13+
</head>
14+
<body>
15+
<button>Click</button>
16+
<div class="outer">
17+
<div class="container">
18+
<div
19+
id="ball"
20+
style="view-transition-name: ball; width:200px; height: 200px;border-radius: 50%; background-color: darkgreen"
21+
>
22+
<ul>
23+
<li>item 1</li>
24+
<li>item 2</li>
25+
</ul>
26+
</div>
27+
</div>
28+
</div>
29+
<script>
30+
const container = document.querySelector<HTMLElement>(".container")!;
31+
const outer = container?.parentElement!;
32+
const button = document.querySelector("button")!;
33+
button.addEventListener("click", (e) => {
34+
console.log("Button click");
35+
e.preventDefault();
36+
e.stopPropagation();
37+
if (container.activeViewTransition) {
38+
document.head.insertAdjacentHTML(
39+
"beforeend",
40+
`<style id="temp-styles">
41+
42+
</style>`,
43+
);
44+
outer.startViewTransition!(() => {});
45+
}
46+
});
47+
48+
document.addEventListener("click", () => {
49+
console.log("state change");
50+
51+
container.startViewTransition!(() => {
52+
const state = container.getAttribute("data-state");
53+
container.style.alignItems =
54+
state !== "2" ? "flex-start" : "flex-end";
55+
container.setAttribute("data-state", state !== "2" ? "2" : "1");
56+
});
57+
});
58+
</script>
59+
</body>
60+
61+
<style is:global>
62+
::view-transition-group(*) {
63+
animation-duration: 5s;
64+
}
65+
66+
.outer,
67+
.container {
68+
contain: paint;
69+
}
70+
71+
html,
72+
body {
73+
margin: 0;
74+
padding: 0;
75+
width: 100%;
76+
height: 100%;
77+
}
78+
79+
.container {
80+
display: flex;
81+
flex-direction: column;
82+
align-items: flex-end;
83+
justify-content: center;
84+
min-height: 100vh;
85+
padding: 16px;
86+
gap: 12px;
87+
}
88+
89+
::view-transition-group(ball) {
90+
view-transition-name: ball;
91+
}
92+
.container {
93+
view-transition-name: none;
94+
view-transition-scope: none !important;
95+
&::view-transition-group(ball) {
96+
view-transition-scope: none !important;
97+
}
98+
}
99+
</style>
100+
</html>

0 commit comments

Comments
 (0)