style(motion): add strict animations and fix layout properties
- Change ReadingProgress and RouteTable to use transform (scaleX/scaleY) instead of width/height - Convert existing easing functions to 200ms cubic-bezier(.2,0,0,1) - Document animation purpose with CSS comments - Add guide panel swap, review desk detail swap, and tally pop animations - Implement prefers-reduced-motion for all new states
This commit is contained in:
@@ -42,7 +42,7 @@ const { target = '.reading-progress span' } = Astro.props;
|
||||
|
||||
function update() {
|
||||
const height = document.documentElement.scrollHeight - window.innerHeight;
|
||||
span.style.width = (height > 0 ? (window.scrollY / height) * 100 : 0) + '%';
|
||||
span.style.transform = `scaleX(${height > 0 ? window.scrollY / height : 0})`;
|
||||
}
|
||||
|
||||
// `{ passive: true }` is non-negotiable. The legacy app.js binds
|
||||
|
||||
Reference in New Issue
Block a user