MPA 网站使用 Chrome 原生过渡动画
之前
页面的过渡动画其实有很多种实现方式，之前在制作主题 rebron1900/11ty-theme-notability 时参考的主题 ByMattLee 11ty Starter 中就使用了 GSAP 这个库实现页面过渡动画。
我当时也研究了一下，不过这些动画库的各种参数都太过复杂，并且我也不需要那么多花哨的动画效果，研究了一段时间后就放弃了。
后来在 JAMSTACK 技术选型的时候关注到 Astro 这个工具，当时发布的 3.0 版本 Astro 3.0 就原生集成了很漂亮的页面过度动画，甚至可以实现一些类似原生应用动画的效果，比如：
- Hot Fuss by The Killers - Astro Records
- X 上的 Astro：“coming soon: zero-javascript page transitions https://t.co/K4TIlAn2N6” / X
当时看 Astro 的介绍还以为只能在 Astro 中并且是 SPA 模式下使用，直到今天群里有人在讨论 Astro 的页面过渡动画，当时我想分享上面提到的这两个页面给他，无意间发现 X 中关于 3.0 版本发布的评论提到了上述第二个链接，而这个链接中居然就提到了 MPA 也能使用这种过渡动画，遂找了资料了解了一下。
View-transition
Astro 这个动画效果是 View-transition 实现的，而这个 View-transition 是 Chrome 浏览器的一个新特性实现的，想要使用必须要 Chrome 浏览器，另外关于 View-transition 的具体介绍可以查看这篇文章： 利用 View Transitions API 实现简单流畅的过渡 | Web Platform | Chrome for Developers 。
我这里自己简单根据一些资料实现了个简单的效果，下面做一下分享，如有错误理解的地方望指正。
前提条件
根据 Chrome 文档中的介绍，这个功能是基于 view-transition 实现，目前只在 Chrome 111 以上的版本中实现，并且可能需要 手动在Flags页面中启用 ：
chrome://flags#view-transition-on-navigation
chrome://flags#view-transition
添加 Meta 属性
在网页 head 部分添加以下属性，启用页面转换动画：
<meta name="view-transition" content="same-origin" />
起个名字
首先需要给需要过渡动画的元素起个名字，你可以直接写在标签里，也可以写在样式表里：
/** 让title使用这个类即可 **/
.book-title{
view-transition-name: book-title;
}
样式表
<article>
<h1 style="view-transition-name: book-title;">
{{ post.title }}
</h1>
{{ post.html }}
</article>
或直接现在页面上
设计过渡动画
根据自己的设计，编写适合的过渡动画，比如我这里想实现以下效果：
- 加载新页面上旧页面的标题隐藏先隐藏
- 新页面的标题在 0.3 秒以内自上而下的出现在文章标题处
我对 CSS 的 keyframes 特性其实也不太懂，所以直接找了一些 Demo 做参考：MPA View Transitions Sandbox，并选择了一些比较通用的动画做修改：
/** 我这里用class的方式编写 **/
/** 定义向下的动画 **/
@keyframes slideOutDown {
from {
transform: translateY(0);
}
to {
transform: translateY(50px);
}
}
/**
括号内是之前定义的view-transition-name
view-transition-old、new代表旧页面和新页面执行的操作，
我这里直接将旧标题隐藏，新页面使用之前定义的动画，在0.3秒内向下出现。
**/
::view-transition-old(book-title) {
display: none;
}
::view-transition-new(book-title) {
animation: slideDown 0.3s;
}
效果
加入评论