使用視圖轉換 API 實現平滑頁面轉換

Sat, 05 Apr 2025 00:00:00 +0900

介紹

提供動態頁面轉換是提升現代 Web 應用程式整體使用者體驗 (UX) 的關鍵因素。

從歷史上看，為了在頁面導航之間平滑地變形或淡出元素，開發人員必須導入大量 JavaScript 庫，例如 Framer Motion 或 GAP。這些庫需要深度掛鉤渲染生命週期，以在對舊 DOM 節點進行動畫處理時延遲卸載。

CSS Scroll-Driven Animations: The Future of Scroll-Based 效果

Tue, 25 Jun 2024 00:00:00 +0900

The Problem with JavaScript Scroll Events

Scroll-based effects have traditionally relied on JavaScript scroll event listeners running on the main thread, which often causes jank, dropped frames, and poor user experience. Even with passive listeners and requestAnimationFrame throttling, layout thrashing remains a persistent issue. CSS Scroll-Driven Animations solve this by moving scroll tracking to the compositor thread, enabling smooth 60fps effects without any JavaScript overhead.

Key Concepts

Three core concepts power this feature. A scroll-timeline links an animation to the scroll position of a scroll container. A view-timeline ties an animation to an element’s visibility within a scroll container. The animation-timeline property binds a named animation to either timeline type. Use timeline-scope to share timelines across elements in the DOM tree.

Animation on Commentary of Takao

使用視圖轉換 API 實現平滑頁面轉換

介紹

CSS Scroll-Driven Animations: The Future of Scroll-Based 效果

The Problem with JavaScript Scroll Events

Key Concepts