MPA网站使用Chrome原生过度动画

之前

页面的过渡动画其实有很多种实现方式，之前在制作主题rebron1900/11ty-theme-notabilityByMattLee 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实现，目前只在Chrome111以上的版本中根据Chrome文档中的介绍，这个功能是基于view-transition实现，目前只在 Chrome 111 以上的版本中实现，并且可能需要 手动在Flags页面中启用 ：实现，并且可能需要手动在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;
}

效果