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

React 中怎么快速实现 /t/897332 这种过渡动画?

  •  
  •   edis0n0 · 2022-12-17 14:50:32 +08:00 · 4134 次点击
    这是一个创建于 467 天前的主题,其中的信息可能已经有所发展或是发生改变。
    前两天刷 V 站的时候看到的,传送门 /t/897332

    非互联网公司,技术栈都是 10 年前的,感觉这过渡动画不错想在个人产品里加个玩玩。
    26 条回复    2022-12-18 22:51:07 +08:00
    l4ever
        1
    l4ever  
       2022-12-17 14:53:01 +08:00
    动画是 css 的, 和框架没多大关系.
    edis0n0
        2
    edis0n0  
    OP
       2022-12-17 14:54:50 +08:00
    @l4ever #1 主要想快速实现这种跨页标题直接放大的无缝过渡动画,应该需要 SPA 框架的路由协助
    edis0n0
        3
    edis0n0  
    OP
       2022-12-17 15:01:48 +08:00
    公司技术栈最新的产品用的是 asp net core 1.1 mvc + jquery ,react 和 ng 都是没事干学着玩的,如果理解的不对欢迎指出
    jazzg62
        4
    jazzg62  
       2022-12-17 15:04:27 +08:00
    看看 css 的 animation
    edis0n0
        5
    edis0n0  
    OP
       2022-12-17 15:05:48 +08:00
    @jazzg62 #4 他这个动画跨页面了,不需要路由框架协助吗
    okakuyang
        6
    okakuyang  
       2022-12-17 15:06:15 +08:00
    react-transition-group
    IvanLi127
        7
    IvanLi127  
       2022-12-17 15:15:18 +08:00 via Android
    @edis0n0 为啥一定要路由框架,如果就三五个页面,其实直接用元素的隐藏和显示就好了。。
    fwh
        8
    fwh  
       2022-12-17 15:17:24 +08:00   ❤️ 2
    jazzg62
        9
    jazzg62  
       2022-12-17 15:19:47 +08:00
    @edis0n0 需要啊,但是也需要先了解下 css 的 animation 哦
    IceBay
        10
    IceBay  
       2022-12-17 15:22:13 +08:00
    https://motion.ant.design/exhibition-cn/
    okakuyang
        11
    okakuyang  
       2022-12-17 15:24:06 +08:00
    @fwh framer 居然做这么好了!,去年看还是只有编辑器,现在居然连模版库之类的都全了!
    ragnaroks
        12
    ragnaroks  
       2022-12-17 15:30:22 +08:00   ❤️ 1
    这里只说思路,我没仔细看原文的实现。

    在页面(路由)的销毁过程过渡 width 、height 至 0 ,在页面(路由)的挂载过渡 width 、height 至目标值。页面的默认大小设置为 0 即可。原理并不复杂,麻烦的是如何配合组件的形态(按钮、卡片)和用途(输入文本、点击响应)实现配套的过渡动画。
    ragnaroks
        13
    ragnaroks  
       2022-12-17 15:38:10 +08:00   ❤️ 1
    我再补充一个,react 、vue 这类库中的“页面”其实并不是真正的某个 html 页面,而是一个 div 元素,因此完全可以利用基于样式表的动画。简单来说 /page/a 和 /page/b 就是 <div id="page-a"> 和 <div id="page-b">。
    rabbbit
        14
    rabbbit  
       2022-12-17 15:48:38 +08:00   ❤️ 1
    jfv
        15
    jfv  
       2022-12-17 15:51:25 +08:00
    react-spring
    我的项目就用到了 不过只用了淡入淡出 可以参考一下
    https://github.com/mebtte/cicada
    edis0n0
        16
    edis0n0  
    OP
       2022-12-17 15:56:11 +08:00
    @rabbbit #14 看文档貌似要 Chrome 109+才能用,那意义不大,后台统计一堆用户尤其是国产浏览器那些版本号还在 chrome70~80 间
    yinchunde
        17
    yinchunde  
       2022-12-17 18:29:05 +08:00
    Flutter 非常好实现,Hero 动画,只要设为同一个 tag 的两个页面的元素,即可做到同样的效果。
    edis0n0
        18
    edis0n0  
    OP
       2022-12-17 18:31:48 +08:00
    @yinchunde #17 Flutter 太重了,开个页面先加载几 MB 的用户体验什么动画都救不回来
    edis0n0
        19
    edis0n0  
    OP
       2022-12-17 18:32:26 +08:00
    @edis0n0 先加载几 MB wasm 文件

    记得打了 wasm 的,输入法 bug 卡没了
    lyc575757
        20
    lyc575757  
       2022-12-17 18:38:33 +08:00 via Android
    vue 倒是有一个类似的库 专门做跨路由的动画 可以看看 readme 参考一下它是如何实现的

    https://github.com/antfu/vue-starport
    Features
        21
    Features  
       2022-12-17 22:04:37 +08:00
    可以想一想不用框架能不能实现
    再用框架降低实现的成本
    ccraohng
        22
    ccraohng  
       2022-12-17 22:28:17 +08:00
    framer motion
    react-flip-toolkit
    wellerman
        23
    wellerman  
       2022-12-17 23:27:58 +08:00
    先了解一下 css 动画
    supertan
        24
    supertan  
       2022-12-18 00:59:18 +08:00
    讨论啥呢,CSS transition 是实现不了还是咋滴
    RabbitDR
        25
    RabbitDR  
       2022-12-18 11:24:00 +08:00
    xiao252
        26
    xiao252  
       2022-12-18 22:51:07 +08:00
    Shared Element Transition
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3267 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 11:52 · PVG 19:52 · LAX 04:52 · JFK 07:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.