Day27 - Astro 系列: View Transition?

Astro 系列文第二十七日：视图过渡

@ Astro

一个漂亮的渐变背景上面有一句标题：「视图过渡」

前言

本章节来谈谈 Astro 3.0 版本最吸引人的一项功能：View Transitions，让你的静态网页也能达到 App 应用一样的丝滑感受。

由于这项技术还在实验阶段，因此放在后面的章节补充。

为什么需要 View Transitions？

View Transitions API🔗 是浏览器正在推出的一项 API，提供简便的方法对任何 DOM 状态更换提供过渡特效，这项技术可以运用在较小范围像是切换内容，也可以是更广的范围像是页面切换的过渡。

这是一项仍在推出的标准，目前大约只有 65% 的浏览器支持，可以渐进增强🔗地使用该技术。除了酷炫之外还能更好地引导视觉的流向、降低用户等待的体感时间，进而提升网站的用户体验。

Astro 与 View Transition

在 Astro 中可以预设很轻易的在切换静态页面时达成：

  • 元素在不同页面之间的形变动画
  • 淡入淡出或滑入滑出元素动画
  • 在不刷新页面的情况下，保持共用的用户界面元素

只需要在每个页面的 <head> 添加 <ViewTransitions /> 就可以在该页面上使用 ViewTransition 过渡动画。

---
// 對所有想添加 View Transition 的頁面添加 "<ViewTransitions />" component
import {ViewTransitions} from 'astro:transitions';
---
<head>
  <title>My View Transition Demo</title>
  <ViewTransitions />
</head>
<body>
  <!-- -->
</body>

接着整个网站切换页面时就会如同 SPA (Single Page Application) 一样流畅，不用刷新页面也能加载新内容了。

元素在不同页面之间的形变动画

如果在 A 页面有一个标题，而 B 页面也有相同的标题，想要在换页时有过渡动画，可以为各自相同的组件绑定 transition:name ：

<aside transition:name="hero">

这样该组件就会在切换页面时添加过渡动画。

元素在不同页面之间的状态保持

有的时候页面切换之前还是希望保持上个页面的状态，这时候就可以使用 transition:persist，孤岛组件也可以。

<Counter client:load transition:persist count={5} />

后备方案

可以为 <ViewTransitions> 添加不同的 fallback 属性来描述当浏览器不支持时的后备方案，目前有以下几种选择：

  • animate (默认, 推荐) - Astro 将会模拟动画，不过该功能尚未完成并不会有任何效果🔗。
  • swap - Astro 将会直接替换新的页面。
  • none - Astro 将会直接刷新页面来加载新页面。
<ViewTransitions fallback="swap">

总结

Astro 提供便捷的方式让静态网站使用 Transition API 更为方便，让传统静态网站也能摇身一变升级为类 App 的体验感受。

延伸阅读