×

文章
2023.12.04

不用框架也能做页面过渡

1 分钟读完 892 次阅读 前端 前端 CSS View Transitions

这个作品集是服务端渲染,不想为了转场拉一套 SPA。View Transitions API 够用:列表进详情,标题有个着落,不像整页白一下。

最小用法

document.startViewTransition(function () {
    main.innerHTML = nextPage;
});

给标题、封面加 view-transition-name,新旧页同名元素会自己对上。名字不要全局重复,列表里每一项用 id 拼出来。

实际限制

  • 旧 Safari 要退回直接换 DOM,别把过渡当功能。
  • 动效只动透明度、位移,别在过渡里改布局计算。
  • 本站文章页是整页跳转,我只在管理后台这种局部刷新里用。

前端热的东西很多。能少引一个运行时,我就少引一个。