我了解一点 CSS 对前端理解很基础,最近看到 Astro 再看到它切换效果时,发现某些元素似乎能有移动的残影效果,在我理解上,这些都是浏览器支持的。而在 VUE 或 React 上较少看到。
举例来说,在 这个网站 上点击链接,实现了元素移动的切换效果。
这些不使用 Astro 或其它框架,如何简单的实现?
1
Track13 149 天前
是 View Transitions API ,不是 css transform ;
https://developer.mozilla.org/zh-CN/docs/Web/API/View_Transitions_API |
3
paopjian 149 天前
@magiclx 纯手撸这种动态过渡动画相当于是手写两个 key 帧加过渡? 感觉有点类似于 ppt 了, 点击后让选择的链接文本上浮, 其他元素直接闪现? 代价就是得拦截前进后退操作,还得记录上一步元素的位置
|
5
codehz 149 天前
手动 js 实现有好多比较麻烦的地方,react 的话更为麻烦,因为 react 不能在组件被卸载之后执行代码,然后这种过渡效果很显然依赖这个行为,因此就需要很多 hacky 的方法来实现,可以看 framer-motion 的 AnimatePresence 组件(至今还是一堆 bug )
|
6
brezeslow 149 天前
|
7
zzlove 149 天前
看看是这种效果吗?页面是用 Next.js 写的
https://blog.evolify.cn/ |