Transitions.dev

项目概述

Transitions.dev 是一套专注于现代浏览器原生 View Transitions API 的页面过渡动效资产库。为 Astro、Next.js 与现代单页应用提供如原生 App 般丝滑的跨页面切换与元素补间形变动画。

核心特性

• ⚡️ 纯原生 View Transitions：由浏览器渲染合成线程（Compositor Thread）原生驱动，实现 60fps 极限丝滑。
• 框架无缝即插即用：完美适配 Astro <ViewTransitions />、Nuxt 与现代 SPA 路由系统。
• 零 JS 运行时开销：无需引入笨重的动效 JS 库，仅通过数十行精炼 CSS 即可达成 App 级转场。
• 在线交互式试验场：实时预览滑入、光影淡入、缩放与形态混合等多维转场效果。

快速上手与示例代码

/* 引入全局过渡样式 */
::view-transition-old(root) {
  animation: 0.25s cubic-bezier(0.4, 0, 0.2, 1) both fade-out;
}
::view-transition-new(root) {
  animation: 0.25s cubic-bezier(0.4, 0, 0.2, 1) both fade-in;
}

技术选型建议与适用场景

• 非常适合：Astro 博客站、技术文档、产品发布落地页以及追求类原生 App 页面路由切换质感的 Web 项目。
• 不适用场景：必须兼容老旧 IE 或对实验性 Web API 严格禁用的保守型企业内网环境。