Bramus - Supercharge Web UX with View Transitions!
HTML-код
- Опубликовано: 25 ноя 2024
- Tired of disjointed web apps? View Transitions are the game-changer you've been waiting for. Whether your app is single or multi-page, this powerful API lets you create seamless, native-like experiences that captivate users. Join me as I dive into the world of View Transitions, showing you how to replace jarring page loads with elegant transitions. Learn to harness the flexibility of CSS and the power of JavaScript to customize transitions and create a truly unique experience. If you're ready to take your web apps to the next level, this talk is a must-attend.
HELP
I have implemented the multi-page navigation demo where next page slides in from the right and the old slides out to left, but there is a problem in the implementation that does not show up in the demo setup.
If you make them pages large enough to be vertically scrollable and start navigation from non-zero scroll position, the sliding happens diagonally (expected: horizontally). The cause seems to be a browser generated transform: matrix(1, 0, 0, 1, 0, 175); on the ::view-transition-group, where 175 is the vertical scroll position just before navigating. I expect it to respect my CSS, where I clearly define only X value: from { transform: translateX(100vw);
It seems not being possible to overrule or workaround. Can anyone help? Or point how to get help?