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" />
Sebastian Markbåge committed
Mar 18, 2025 at 09:24 UTC
a35aaf704cca9a5db16f5b197e3ac17eb960b72f
2 files changed
+81
-67
fixtures/view-transition/src/components/Page.css
+11
-2
@@ -8,7 +8,16 @@
8
}
9
10
.swipe-recognizer {
11
- width: 200px;
12
- border: 1px solid #333333;
11
+ width: 300px;
12
+ background: #eee;
13
border-radius: 10px;
14
+ padding: 20px;
15
}
16
+
17
+.button {
18
+ background: #000;
19
+ color: #fff;
20
+ border: 0px;
21
+ border-radius: 5px;
22
+ padding: 10px;
23
+}
\ No newline at end of file
fixtures/view-transition/src/components/Page.js
+70
-65
@@ -74,75 +74,80 @@ export default function Page({url, navigate}) {
74
</ViewTransition>
75
);
76
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>
91
<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>
104
</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
+ )}
116
<ViewTransition>
140
- <div>!!</div>
117
+ {show ? (
118
+ <div>hello{exclamation}</div>
119
+ ) : (
120
+ <section>Loading</section>
121
+ )}
122
</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>
151
</div>
152
);
153
}