AI 摘要：文章探讨了如何利用 Web API 中的 View Transitions （视图过渡）API 为多页应用程序（MPA）创建差异化的页面切换动画。作者通过 JavaScript 事件监听 pageswap 和 pagereveal，结合 e.viewTransition.types.add() 方法，实现根据特定 URL 条件设置自定义视图过渡类型。接着，文章演示了如何在 CSS 中使用 :active-view-transition-type() 伪类，针对不同的视图过渡类型应用不同的动画效果，从而覆盖默认过渡动画。最后，作者分享了一些关于这种 JS 与 CSS 协同控制的见解，并提及了相关学习资源和浏览器兼容性信息。

1. View Transitions API 基础
• DOM 事件监听: 介绍 pageswap 和 pagereveal 这两个事件，它们在页面卸载和加载时触发，并提供 e.viewTransition 对象用于自定义视图过渡。
• 条件设置过渡类型: 讲解如何通过 JavaScript 在 pagereveal 事件中，根据 document.location.pathname 等条件，使用 e.viewTransition.types.add() 方法为当前页面设置一个自定义的视图过渡类型。

2. 默认页面过渡动画配置
• CSS 定义默认动画: 演示如何使用 ::view-transition-old(main) 和 ::view-transition-new(main) 伪元素，结合 @keyframes 定义网站的默认页面切换动画效果，如滑动出入。
• 元素命名: 强调需要为要过渡的元素（如 <main> 内容区）设置 view-transition-name 属性，以便在 CSS 中精准控制。

3. 定制特定页面的过渡动画
• CSS 覆盖默认动画: 展示如何利用 :active-view-transition-type() CSS 伪类，根据在 JavaScript 中设置的自定义视图过渡类型，为特定页面定义一套专属的动画，从而覆盖默认的动画效果。
• 动画优先级: 解释自定义类型动画如何通过更高的 CSS 特异性（specificity）来覆盖默认动画。

4. 学习资源与浏览器支持
• 参考资料: 推荐 Bramus 的《Cross-document view transitions for multi-page applications》作为进一步学习的优秀资源。
• CSS 类型声明: 提及 view-transition-types CSS 属性，但作者对其具体用途表示疑问，推测可能用于限制允许的过渡类型。
• 浏览器兼容性: 指出 JavaScript ViewTransitionTypeSet 和 CSS :active-view-transition-type() 在 Chrome 和 Safari 中得到支持，Firefox 则需开启 flag（标志）。

Frontend Masters

Different Page Transitions For Different Circumstances

I feel like common usage for multi-page view transitions is to set up a general system for them that applies generally to all pages and elements, then let it ride.