V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
magiclx
V2EX  ›  程序员

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

  •  
  •   magiclx · 38 天前 · 779 次点击
    这是一个创建于 38 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    11 条回复    2024-06-08 23:41:57 +08:00
    Track13
        1
    Track13  
       38 天前
    是 View Transitions API ,不是 css transform ;
    https://developer.mozilla.org/zh-CN/docs/Web/API/View_Transitions_API
    magiclx
        2
    magiclx  
    OP
       38 天前
    @Track13 见笑了,谢谢提示。在不支持的浏览器上,手写 JavaScript 可以实现吗?
    paopjian
        3
    paopjian  
       38 天前
    @magiclx 纯手撸这种动态过渡动画相当于是手写两个 key 帧加过渡? 感觉有点类似于 ppt 了, 点击后让选择的链接文本上浮, 其他元素直接闪现? 代价就是得拦截前进后退操作,还得记录上一步元素的位置
    Track13
        4
    Track13  
       38 天前
    @magiclx 类似的叫 flip 。
    codehz
        5
    codehz  
       37 天前
    手动 js 实现有好多比较麻烦的地方,react 的话更为麻烦,因为 react 不能在组件被卸载之后执行代码,然后这种过渡效果很显然依赖这个行为,因此就需要很多 hacky 的方法来实现,可以看 framer-motion 的 AnimatePresence 组件(至今还是一堆 bug )
    brezeslow
        6
    brezeslow  
       37 天前
    astro 官网文档说明了一些特性
    视图过渡动画
    https://docs.astro.build/zh-cn/guides/view-transitions/
    zzlove
        7
    zzlove  
       37 天前
    看看是这种效果吗?页面是用 Next.js 写的
    https://blog.evolify.cn/
    magiclx
        8
    magiclx  
    OP
       36 天前
    @brezeslow 谢谢提示,avatar 挺炸的
    magiclx
        9
    magiclx  
    OP
       36 天前
    @zzlove 是的,对比楼上的实现,Astro 实现起来挺容易的。
    zzlove
        10
    zzlove  
       36 天前
    @magiclx nextjs 中也不难,理论上重写 一下 Link 组件,把跳转逻辑包在 document.startViewTransition 方法中,然后前后两个页面中需要过渡的元素,给同一个 view-transition-name 就可以了
    magiclx
        11
    magiclx  
    OP
       33 天前
    @zzlove 看到你的 blog 的实现了,这个效果确实让 Web 体验更流畅,但不看源码会感觉其中是挺复杂的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3313 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 10:27 · PVG 18:27 · LAX 03:27 · JFK 06:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.