Skip to content

Commit a35aaf7

Browse files
sebmarkbagesebmarkbage
authored
Update ViewTransition fixture to include bigger buttons/swipe (#32656)
I made the button a bit bigger and moved the swipe recognizer around the whole screen. Typically these are used around the whole content without any affordances and not as a standalone scrubber. Ideally the swipe would be able to be inside the animating content but it can't yet due to [this Safari bug](https://bugs.webkit.org/show_bug.cgi?id=288795). Added back some paragraphs so that scrolling can be tested properly. It appears it's possible to get the swipe to be a bit misaligned if you scroll enough on iOS. <img width="437" alt="Screenshot 2025-03-17 at 10 27 42 PM" src="https://github.com/user-attachments/assets/589dc828-717e-420c-83dc-94ae6ad59791" />
1 parent 3c3696d commit a35aaf7

File tree

2 files changed

+81
-67
lines changed

2 files changed

+81
-67
lines changed

‎fixtures/view-transition/src/components/Page.css

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,16 @@
88
}
99

1010
.swipe-recognizer {
11-
width: 200px;
12-
border: 1px solid #333333;
11+
width: 300px;
12+
background: #eee;
1313
border-radius: 10px;
14+
padding: 20px;
1415
}
16+
17+
.button {
18+
background: #000;
19+
color: #fff;
20+
border: 0px;
21+
border-radius: 5px;
22+
padding: 10px;
23+
}

‎fixtures/view-transition/src/components/Page.js

Lines changed: 70 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -74,75 +74,80 @@ export default function Page({url, navigate}) {
7474
</ViewTransition>
7575
);
7676
return (
77-
<div>
78-
<button
79-
onClick={() => {
80-
navigate(url === '/?b' ? '/?a' : '/?b');
81-
}}>
82-
{url === '/?b' ? 'A' : 'B'}
83-
</button>
84-
<ViewTransition className="none">
85-
<div>
86-
<ViewTransition>
87-
<div>
88-
<ViewTransition className={transitions['slide-on-nav']}>
89-
<h1>{!show ? 'A' : 'B'}</h1>
90-
</ViewTransition>
91-
</div>
92-
</ViewTransition>
93-
<ViewTransition
94-
className={{
95-
'navigation-back': transitions['slide-right'],
96-
'navigation-forward': transitions['slide-left'],
97-
}}>
98-
<h1>{!show ? 'A' + counter : 'B' + counter}</h1>
99-
</ViewTransition>
100-
{show ? (
101-
<div>
102-
{a}
103-
{b}
104-
</div>
105-
) : (
106-
<div>
107-
{b}
108-
{a}
109-
</div>
110-
)}
111-
<ViewTransition>
112-
{show ? <div>hello{exclamation}</div> : <section>Loading</section>}
113-
</ViewTransition>
114-
<p>scroll me</p>
115-
<p>
116-
<Id />
117-
</p>
118-
<p></p>
119-
<p></p>
120-
<p></p>
121-
<p></p>
122-
<p></p>
123-
<div className="swipe-recognizer">
124-
<SwipeRecognizer
125-
action={swipeAction}
126-
gesture={startGesture}
127-
direction={show ? 'left' : 'right'}>
128-
Swipe me
129-
</SwipeRecognizer>
130-
</div>
131-
<p></p>
132-
<p></p>
133-
{show ? null : (
77+
<div className="swipe-recognizer">
78+
<SwipeRecognizer
79+
action={swipeAction}
80+
gesture={startGesture}
81+
direction={show ? 'left' : 'right'}>
82+
<button
83+
className="button"
84+
onClick={() => {
85+
navigate(url === '/?b' ? '/?a' : '/?b');
86+
}}>
87+
{url === '/?b' ? 'Goto A' : 'Goto B'}
88+
</button>
89+
<ViewTransition className="none">
90+
<div>
13491
<ViewTransition>
135-
<div>world{exclamation}</div>
92+
<div>
93+
<ViewTransition className={transitions['slide-on-nav']}>
94+
<h1>{!show ? 'A' : 'B' + counter}</h1>
95+
</ViewTransition>
96+
</div>
97+
</ViewTransition>
98+
<ViewTransition
99+
className={{
100+
'navigation-back': transitions['slide-right'],
101+
'navigation-forward': transitions['slide-left'],
102+
}}>
103+
<h1>{!show ? 'A' + counter : 'B'}</h1>
136104
</ViewTransition>
137-
)}
138-
<Activity mode={show ? 'visible' : 'hidden'}>
105+
{show ? (
106+
<div>
107+
{a}
108+
{b}
109+
</div>
110+
) : (
111+
<div>
112+
{b}
113+
{a}
114+
</div>
115+
)}
139116
<ViewTransition>
140-
<div>!!</div>
117+
{show ? (
118+
<div>hello{exclamation}</div>
119+
) : (
120+
<section>Loading</section>
121+
)}
141122
</ViewTransition>
142-
</Activity>
143-
{show ? <Component /> : null}
144-
</div>
145-
</ViewTransition>
123+
<p>
124+
<Id />
125+
</p>
126+
{show ? null : (
127+
<ViewTransition>
128+
<div>world{exclamation}</div>
129+
</ViewTransition>
130+
)}
131+
<Activity mode={show ? 'visible' : 'hidden'}>
132+
<ViewTransition>
133+
<div>!!</div>
134+
</ViewTransition>
135+
</Activity>
136+
<p>these</p>
137+
<p>rows</p>
138+
<p>exist</p>
139+
<p>to</p>
140+
<p>test</p>
141+
<p>scrolling</p>
142+
<p>content</p>
143+
<p>out</p>
144+
<p>of</p>
145+
<p>the</p>
146+
<p>viewport</p>
147+
{show ? <Component /> : null}
148+
</div>
149+
</ViewTransition>
150+
</SwipeRecognizer>
146151
</div>
147152
);
148153
}

0 commit comments

Comments
 (0)