基本多页面视图过渡

Avatar of Geoff Graham
Geoff Graham
@view-transition {
  navigation: auto;
}

这直接放在你的样式表中,它是最基本的基础 视图过渡。效果是两个页面之间的交叉淡入淡出。

Chrome 团队最初发布了一个元标签,我们可以将其放在 <head> 中以选择加入视图过渡。

<meta name="view-transition" content="same-origin" />

这是一种暂时访问视图过渡的方式,但随后 Chrome 团队 在 2024 年 5 月发布了更新,默认情况下启用了多页面视图过渡,我们只需要使用上面的 CSS 代码段选择加入即可。