framer-motion layoutTransition 在 React 中确实有效，但在 NextJS 中无效答案

【问题标题】：framer-motion layoutTransition does work in React, but not in NextJSframer-motion layoutTransition 在 React 中确实有效，但在 NextJS 中无效
【发布时间】：2020-08-22 21:41:30
【问题描述】：

我正在尝试围绕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

【问题讨论】：

标签： reactjs next.js framer-motion layouttransition

【解决方案1】：

我遇到了同样的问题，我花了很多时间来解决。所以它不适用于您的下一个应用程序的原因是您的 framer-motion 版本高于 2.0。将其降级到最新的 v1，即 1.11.1，你应该没问题。我不知道为什么 layoutTransitions 从 v2 开始就停止工作，没有找到有关此问题的任何信息。

我发现 framer-motion 很棒，但它缺乏良好的文档，而且社区似乎还不够充实

【讨论】：

顺便说一句，layoutTransition 似乎已被弃用。请改用 layout={true}。我已经对其进行了测试，并且在最新版本上效果很好。
太棒了！谢谢，layout 有效，然后我使用 transition={...} 代替 layoutTransition={...}
很高兴能帮上忙！