Sidebar: the panels really slide
Tailwind 4 moves translate-x-* with the CSS translate property, and the layers transitioned transform, so they jumped and only faded. They now transition translate over 380ms with the fade at 220ms, so the two menus never blur together.
1 file+3−20/1 viewed
| 257 | 257 | * The sidebar's menus are two layers, the way a phone pushes a screen: the | |
| 258 | 258 | * one arriving slides in from the right over the full width, while the one | |
| 259 | 259 | * leaving drifts a quarter of the way left and fades, both on one long | |
| 260 | − | * ease-out. Going back reverses it. | |
| 260 | + | * ease-out, the fade quicker than the move so the two never blur together. | |
| 261 | + | * Going back reverses it. | |
| 261 | 262 | */ | |
| 262 | 263 | const LAYER = | |
| 263 | − | "absolute inset-0 transition-[transform,opacity] duration-[380ms] ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform motion-reduce:transition-none"; | |
| 264 | + | "absolute inset-0 [transition:translate_380ms_cubic-bezier(0.32,0.72,0,1),opacity_220ms_ease-out] will-change-[translate,opacity] motion-reduce:transition-none"; | |
| 264 | 265 | /** One menu, filling its layer. */ | |
| 265 | 266 | const PANEL = "h-full overflow-y-auto px-2 pb-4"; | |
| 266 | 267 |