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

[edis0n0]

前两天刷 V 站的时候看到的，传送门 /t/897332

非互联网公司，技术栈都是 10 年前的，感觉这过渡动画不错想在个人产品里加个玩玩。

[l4ever]

动画是 css 的, 和框架没多大关系.

[edis0n0]

@l4ever #1 主要想快速实现这种跨页标题直接放大的无缝过渡动画，应该需要 SPA 框架的路由协助

[edis0n0]

公司技术栈最新的产品用的是 asp net core 1.1 mvc + jquery ，react 和 ng 都是没事干学着玩的，如果理解的不对欢迎指出

[jazzg62]

看看 css 的 animation

[edis0n0]

@jazzg62 #4 他这个动画跨页面了，不需要路由框架协助吗

[okakuyang]

react-transition-group

[IvanLi127]

@edis0n0 为啥一定要路由框架，如果就三五个页面，其实直接用元素的隐藏和显示就好了。。

[fwh]

https://www.framer.com/docs/animate-shared-layout/

[jazzg62]

@edis0n0 需要啊，但是也需要先了解下 css 的 animation 哦

[IceBay]

https://motion.ant.design/exhibition-cn/

[okakuyang]

@fwh framer 居然做这么好了！，去年看还是只有编辑器，现在居然连模版库之类的都全了！

[ragnaroks]

这里只说思路，我没仔细看原文的实现。

在页面（路由）的销毁过程过渡 width 、height 至 0 ，在页面（路由）的挂载过渡 width 、height 至目标值。页面的默认大小设置为 0 即可。原理并不复杂，麻烦的是如何配合组件的形态（按钮、卡片）和用途（输入文本、点击响应）实现配套的过渡动画。

[ragnaroks]

我再补充一个，react 、vue 这类库中的“页面”其实并不是真正的某个 html 页面，而是一个 div 元素，因此完全可以利用基于样式表的动画。简单来说 /page/a 和 /page/b 就是 <div id="page-a"> 和 <div id="page-b">。

[rabbbit]

https://developer.chrome.com/docs/web-platform/view-transitions/

[jfv]

react-spring
我的项目就用到了 不过只用了淡入淡出 可以参考一下
https://github.com/mebtte/cicada

[edis0n0]

@rabbbit #14 看文档貌似要 Chrome 109+才能用，那意义不大，后台统计一堆用户尤其是国产浏览器那些版本号还在 chrome70~80 间

[yinchunde]

Flutter 非常好实现，Hero 动画，只要设为同一个 tag 的两个页面的元素，即可做到同样的效果。

[edis0n0]

@yinchunde #17 Flutter 太重了，开个页面先加载几 MB 的用户体验什么动画都救不回来

[edis0n0]

@edis0n0 先加载几 MB wasm 文件

记得打了 wasm 的，输入法 bug 卡没了

[lyc575757]

vue 倒是有一个类似的库 专门做跨路由的动画 可以看看 readme 参考一下它是如何实现的

https://github.com/antfu/vue-starport

[Features]

可以想一想不用框架能不能实现
再用框架降低实现的成本

[ccraohng]

framer motion
react-flip-toolkit

[wellerman]

先了解一下 css 动画

[supertan]

讨论啥呢，CSS transition 是实现不了还是咋滴

[RabbitDR]

基本原理是这个 https://aerotwist.com/blog/flip-your-animations/，可以去搜搜和框架相关的关键词。第一次知道 framer motion ，感觉挺不错的。

[xiao252]

Shared Element Transition