V2EX = way to explore V2EX 是一个关于分享和探索的地方
Sign Up Now For Existing Member Sign In
请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 694 days ago, the information mentioned may be changed or developed.
我了解一点 CSS 对前端理解很基础，最近看到 Astro 再看到它切换效果时，发现某些元素似乎能有移动的残影效果，在我理解上，这些都是浏览器支持的。而在 VUE 或 React 上较少看到。
举例来说，在 这个网站 上点击链接，实现了元素移动的切换效果。
这些不使用 Astro 或其它框架，如何简单的实现？
 | 1 bgm004 Jun 4, 2024 是 View Transitions API ，不是 css transform ； https://developer.mozilla.org/zh-CN/docs/Web/API/View_Transitions_API |
 | 3 paopjian Jun 4, 2024 @magiclx 纯手撸这种动态过渡动画相当于是手写两个 key 帧加过渡? 感觉有点类似于 ppt 了, 点击后让选择的链接文本上浮, 其他元素直接闪现? 代价就是得拦截前进后退操作,还得记录上一步元素的位置 |
 | 5 codehz Jun 4, 2024 手动 js 实现有好多比较麻烦的地方，react 的话更为麻烦，因为 react 不能在组件被卸载之后执行代码，然后这种过渡效果很显然依赖这个行为，因此就需要很多 hacky 的方法来实现，可以看 framer-motion 的 AnimatePresence 组件（至今还是一堆 bug ） |
 | 6 brezeslow Jun 4, 2024 |
 | 7 zzlove Jun 5, 2024 看看是这种效果吗？页面是用 Next.js 写的 https://blog.evolify.cn/ |
Select Language