这个演示的特别之处在于它几乎完全是服务器渲染的 HTML,请注意,这些都不是客户端渲染的。
浏览器完全通过 Astro 的 View Transition API 来驱动动画(对于尚不支持它的浏览器有后备)
现场预览 https://spotify-astro-transitions.vercel.app
这一个简单的Spotify演示:
- 使用Astro 3.0 View Transitions,
- 使用tailwindcss用于样式实时预览
- svelte做后端
github源码点击标题
View Transition 是一种在 DOM 状态之间转换的实验性机制,请在以下链接中了解更多信息:
- Astro 文档:https://docs.astro.build/en/guides/view-transitions/
- MDN 文档:https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
网友:
1、为什么这比我的本机 Windows 11 客户端更快
2、在Chrome上看起来很棒,但我根本没有得到任何过渡