页面切换想顺滑，不用先把网站拆成SPA。多页网站照样能做原生过渡，关键是别把“动画”和“页面架构”绑死。 先分两类： • MPA：点链接，加载另一份HTML… · @BaiBtw · TwKit

@BaiBtw

页面切换想顺滑，不用先把网站拆成SPA。多页网站照样能做原生过渡，关键是别把“动画”和“页面架构”绑死。 先分两类： • MPA：点链接，加载另一份HTML文档。 • SPA：留在同一份HTML里，由JavaScript更新内容，通常还要处理客户端路由和状态。 View Transitions也分单文档和跨文档。前者在页面内部切换状态；后者能给真正的页面跳转加动画，不是偷偷把MPA变成SPA。 最小开关是在出发页和目标页的CSS里都加： @view-transition { navigation: auto; } 例如首页index.html和爱好页hobbies.html互相链接，两边启用后，支持的浏览器会接管过渡。默认是旧画面淡出、新画面淡入，基础版本不需要JavaScript。 想改成滑动，抓住两个伪元素： ::view-transition-old(root) 对应这次离开的页面； ::view-transition-new(root) 对应这次进入的页面。 old和new不是固定指某个文件，方向一换，身份也跟着换。 一个具体做法：进入爱好页时，在目标页样式里关掉old的默认动画，让new用0.3秒从translateX(100vw)滑到0；返回首页时，在首页样式里让old从0滑回100vw，并设z-index: 2，再关掉new的动画。这样动的始终是爱好页，首页留在底下。 有几道边界，别省略： • 两份文档必须同源，导航中也不能夹跨源重定向。 • 不是任意跳转都生效：支持历史遍历；push/replace还要求由用户与页面内容交互发起，不是浏览器界面操作。 • 单页过渡能用，不代表跨页过渡也能用。跨文档的@view-transition目前仍是有限可用，Chrome、Edge、Safari支持，Firefox尚未支持。 • 不支持时仍正常跳页，只是没有这层动画。这叫渐进增强，不是给导航加一道必过的门槛。 说白了：页面还是那个多页网站，浏览器多管了一段切换画面。没必要为了一个过场动画，顺手把整套架构都换了。

曝光 24 · 评论 1 · 点赞 0 · 书签 0