reactjs - framer-motion layoutTransition 在 React 中确实有效,但在 NextJS 中无效
问题描述
我正在尝试将我的头包裹起来framer-motion
,这是一个非常好的动画库,我正在尝试与 NextJS 结合使用。我关注了一个 CSS 技巧 youtube 视频,该视频layoutTransition
使用此沙箱进行了解释:
https ://codesandbox.io/s/framer-motion-css-tricks-template-3-07wkh?fontsize=14&module=/src/Image.tsx&file=/ src/Image.tsx:0-783
渴望尝试一下,我复制到我的 NextJs 项目中,但我无法让它工作。我剥离了所有东西以使其更加干净,最终得到了这些沙箱:一个是 React,另一个是 NExtJS。对我来说,它们是相同的,但是使用的图像缩放layoutTransition
似乎在我的 NextJS 沙箱中不起作用,为什么?
https://codesandbox.io/s/framer-motion-image-zoom-forked-774up https://codesandbox.io/s/currying-haze-wii0m
解决方案
我遇到了同样的问题,这让我花了很多时间来解决。所以它不适用于您的下一个应用程序的原因是您的 framer-motion 版本高于 2.0。将其降级到最新的 v1,即 1.11.1,你应该没问题。我不知道为什么 layoutTransitions 自 v2 以来停止工作,没有找到有关此问题的任何信息。
我发现 framer-motion 很棒,但它缺乏良好的文档,而且社区似乎还不是很充实
推荐阅读
- tensorflow - Distributing dictionary of tensor values to bigger tensor
- python - 如何获取天真的0-1背包中的选定项目列表?
- amazon-web-services - 将 CloudFormation 参数作为字符串列表传递
- reactjs - 在 React Router 中刷新页面时如何保持登录状态?
- python - 如何将 JSON 的字节串读入 pandas
- tinymce - 从 TinyMCE 中的表、tr 和 td 中删除“data-sheets-value”
- django - 运行 Gunicorn 和 Django
- sql-server - 根据上一行中的值更新值
- python - 如何在相似的行中获取不同的列
- sql - 在一张表的不同列中打印 2 个查询的结果