Skip to content

Commit 090b614

Browse files
svgeesussvgeesus
committed
[css-view-transitions-2][editorial] Updates for FPWD; diagrams copied from level 1
1 parent f0de230 commit 090b614

20 files changed

+395
-3
lines changed

‎css-view-transitions-2/Overview.bs‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<pre class='metadata'>
22
Title: CSS View Transitions Module Level 2
3-
Shortname: css-view-transitions-2
3+
Shortname: css-view-transitions
44
Level: 2
5-
Status: ED
5+
Status: FPWD
66
Group: csswg
7-
Date: 2023-05-30
7+
Date: 2024-05-09
88
Prepare for TR: yes
99
ED: https://drafts.csswg.org/css-view-transitions-2/
10+
TR: https://www.w3.org/TR/css-view-transitions-2/
1011
Work Status: exploring
1112
Editor: Noam Rosenthal, Google, w3cid 121539
1213
Editor: Khushal Sagar, Google, w3cid 122787

‎css-view-transitions-2/diagrams/desktop-browser-snapshot-root.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎css-view-transitions-2/diagrams/desktop-browser.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎css-view-transitions-2/diagrams/phases/phases.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<style>
3+
html {
4+
font-family: sans-serif;
5+
}
6+
body {
7+
margin: 0;
8+
}
9+
.stage {
10+
width: 1920px;
11+
height: 1080px;
12+
background: #fff;
13+
position: relative;
14+
}
15+
code {
16+
font-family: Courier, monospace;
17+
}
18+
spec-slide {
19+
position: absolute;
20+
inset: 0;
21+
}
22+
.vt-demo {
23+
position: absolute;
24+
inset: 25px 0;
25+
display: grid;
26+
grid-template-columns: 1fr 1fr 1fr;
27+
grid-template-rows: 1fr 95px;
28+
gap: 80px 60px;
29+
color: #000;
30+
font: normal 68px sans-serif;
31+
text-align: center;
32+
}
33+
34+
.step {
35+
grid-column-end: span 3;
36+
contain: layout;
37+
}
38+
39+
.example {
40+
display: grid;
41+
grid-template-rows: max-content 1fr;
42+
gap: 37px;
43+
}
44+
45+
.page {
46+
position: relative;
47+
border: 7px solid #000;
48+
}
49+
50+
.states {
51+
display: grid;
52+
isolation: isolate;
53+
position: absolute;
54+
top: 30px;
55+
left: 30px;
56+
}
57+
58+
.states .state-2 {
59+
opacity: 0;
60+
transform: none;
61+
}
62+
63+
.state-1,
64+
.state-2 {
65+
background: green;
66+
color: white;
67+
padding: 20px 50px;
68+
border-radius: 50px;
69+
position: absolute;
70+
top: 30px;
71+
left: 30px;
72+
width: 200px;
73+
contain: layout;
74+
font-size: 56px;
75+
}
76+
77+
.state-2 {
78+
background: orange;
79+
color: black;
80+
transform: translate(219px, 469px);
81+
}
82+
83+
.states > * {
84+
grid-area: 1 / 1;
85+
mix-blend-mode: plus-lighter;
86+
position: relative;
87+
top: 0;
88+
left: 0;
89+
}
90+
91+
.what-user-sees {
92+
position: absolute;
93+
inset: auto 0 35px;
94+
font-size: 53px;
95+
}
96+
</style>
97+
<script type="module" src="script.js"></script>
98+
<div class="stage"></div>

‎css-view-transitions-2/diagrams/phases/script.js‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import { Slide, transition, transitionFrom } from "../resources/slides.js";
2+
3+
const slide = new Slide(async function* () {
4+
slide.innerHTML = `
5+
<div class="vt-demo">
6+
<div class="example" aria-hidden="true">
7+
<div class="title">Main DOM</div>
8+
<div class="page">
9+
<div class="state-1">State 1</div>
10+
</div>
11+
</div>
12+
<div class="example" aria-hidden="true">
13+
<div class="title">Transition root</div>
14+
<div class="page transition-page"></div>
15+
</div>
16+
<div class="example" aria-hidden="true">
17+
<div class="title">User sees</div>
18+
<div class="page combined-page">
19+
<div class="states">
20+
<div class="state-1">State 1</div>
21+
<div class="state-2">State 2</div>
22+
</div>
23+
<div class="what-user-sees">(Main DOM)</div>
24+
</div>
25+
</div>
26+
<div class="step" aria-live="polite">Developer calls <code>document.startViewTransition()</code></div>
27+
</div>
28+
`;
29+
30+
/** @type {HTMLElement[]} */
31+
const [domPage, transitionPage, combinedPage] =
32+
slide.querySelectorAll(".page");
33+
34+
/** @type {HTMLElement} */
35+
const whatUserSees = slide.querySelector(".what-user-sees");
36+
37+
// This pauses the slide until 'next' is clicked.
38+
yield;
39+
40+
/** @type {HTMLElement} */
41+
const step = slide.querySelector(".step");
42+
step.textContent = `Current state captured as the "old" state`;
43+
44+
yield;
45+
46+
step.textContent = "Rendering paused";
47+
whatUserSees.textContent = "(Paused render)";
48+
49+
yield;
50+
51+
step.textContent = "Developer updates document state";
52+
domPage.innerHTML = `<div class="state-2">State 2</div>`;
53+
54+
yield;
55+
56+
step.textContent = `Current state captured as the "new" state`;
57+
58+
yield;
59+
60+
step.textContent = "Transition pseudo-elements created";
61+
transitionPage.innerHTML = `
62+
<div class="states">
63+
<div class="state-1">State 1</div>
64+
<div class="state-2">State 2</div>
65+
</div>
66+
`;
67+
68+
yield;
69+
70+
step.textContent =
71+
"Rendering unpaused, revealing the transition pseudo-elements";
72+
whatUserSees.textContent = "(Transition root)";
73+
74+
yield;
75+
76+
step.textContent = "Pseudo-elements animate";
77+
78+
// Wow, this would be way easier with view transitions…
79+
const states = [transitionPage, combinedPage].map((el) =>
80+
el.querySelector(".states")
81+
);
82+
const state1s = [transitionPage, combinedPage].map((el) =>
83+
el.querySelector(".state-1")
84+
);
85+
const state2s = [transitionPage, combinedPage].map((el) =>
86+
el.querySelector(".state-2")
87+
);
88+
89+
for (const state of states) {
90+
transition(
91+
state,
92+
{ transform: "translate(219px, 469px)" },
93+
{
94+
duration: 1000,
95+
easing: "ease-in-out",
96+
}
97+
);
98+
}
99+
100+
for (const state1 of state1s) {
101+
transition(
102+
state1,
103+
{ opacity: "0" },
104+
{
105+
duration: 1000,
106+
easing: "ease-in-out",
107+
}
108+
);
109+
}
110+
111+
for (const state2 of state2s) {
112+
transition(
113+
state2,
114+
{ opacity: "1" },
115+
{
116+
duration: 1000,
117+
easing: "ease-in-out",
118+
}
119+
);
120+
}
121+
122+
yield;
123+
124+
step.textContent = "Transition pseudo-elements removed";
125+
transitionPage.innerHTML = "";
126+
whatUserSees.textContent = "(Main DOM)";
127+
});
128+
129+
document.querySelector(".stage").append(slide);

‎css-view-transitions-2/diagrams/phone-browser-scrolled-to-top-with-url.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎css-view-transitions-2/diagrams/phone-browser-scrolled-to-top-without-url.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎css-view-transitions-2/diagrams/phone-browser-snapshot-root.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎css-view-transitions-2/diagrams/phone-browser-with-url.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)