关于 Astro 的元素 css transform 的效果的疑问

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 183 天前的主题，其中的信息可能已经有所发展或是发生改变。

我了解一点 CSS 对前端理解很基础，最近看到 Astro 再看到它切换效果时，发现某些元素似乎能有移动的残影效果，在我理解上，这些都是浏览器支持的。而在 VUE 或 React 上较少看到。

举例来说，在这个网站上点击链接，实现了元素移动的切换效果。

这些不使用 Astro 或其它框架，如何简单的实现？

11 条回复 • 2024-06-08 23:41:57 +08:00

Track13

183 天前

magiclx

183 天前

@Track13 见笑了，谢谢提示。在不支持的浏览器上，手写 JavaScript 可以实现吗？

paopjian

183 天前

@magiclx 纯手撸这种动态过渡动画相当于是手写两个 key 帧加过渡? 感觉有点类似于 ppt 了, 点击后让选择的链接文本上浮, 其他元素直接闪现? 代价就是得拦截前进后退操作,还得记录上一步元素的位置

Track13

183 天前

@magiclx 类似的叫 flip 。

codehz

183 天前

手动 js 实现有好多比较麻烦的地方，react 的话更为麻烦，因为 react 不能在组件被卸载之后执行代码，然后这种过渡效果很显然依赖这个行为，因此就需要很多 hacky 的方法来实现，可以看 framer-motion 的 AnimatePresence 组件（至今还是一堆 bug ）

brezeslow

183 天前

astro 官网文档说明了一些特性
视图过渡动画
https://docs.astro.build/zh-cn/guides/view-transitions/

zzlove

183 天前

看看是这种效果吗？页面是用 Next.js 写的
https://blog.evolify.cn/

magiclx

182 天前

@brezeslow 谢谢提示，avatar 挺炸的

magiclx

182 天前

@zzlove 是的，对比楼上的实现，Astro 实现起来挺容易的。

zzlove

182 天前

@magiclx nextjs 中也不难，理论上重写一下 Link 组件，把跳转逻辑包在 document.startViewTransition 方法中，然后前后两个页面中需要过渡的元素，给同一个 view-transition-name 就可以了

magiclx

179 天前

@zzlove 看到你的 blog 的实现了，这个效果确实让 Web 体验更流畅，但不看源码会感觉其中是挺复杂的。