问题标签 [framer-motion]

我正在将应用程序从 react-spring 迁移到 framer-motion。使用 Spring，我可以为数字设置动画：

我不知道如何使用 Framer-Motion 来做到这一点。

我不知道如何<AnimateSharedLayout />通过 framer-motion 使用组件为路由设置动画。基本上在这里的代码中，我想显示一个图像列表，当点击它们时，我想导航到/images/[image_id]并显示它。我在本地没有图像，所以我必须获取它们。这里有一些问题：

1. 第一次在索引页面上获取相同的元素，然后在详细信息页面上重新获取（如果有办法将它带到详细信息页面会很好）
2. 更改路线前，页面自动滚动到顶部，破坏动画；
3. 如果用户在慢速网络上，动画会滞后甚至无法启动；
4. 返回上一条路线不会重播动画（我可能必须缓存 api 调用以避免重新获取它们？）

这是代码_app.tsx

这里是pages/index.tsx

这里是pages/images/[image].tsx

这是components/Picture.tsx

所以几天前我刚刚学习了成帧器运动，现在我遇到了第一个障碍。我只是在为容器和按钮设置动画，直到我偶然发现以下问题：

我试图用以下变体为 div 容器设置动画：

以及具有以下变体的 Button：

我的问题是，当我将鼠标悬停在容器上时它可以工作（摆动效果），但是当我将鼠标悬停在按钮上时，按钮悬停效果（缩放效果）它不起作用。

我确实找到了解决这个问题的方法，即对 whileHover、transition 和 initial props 使用对象语法。但是对于代码模块化，我想使用变体，所以如果有人可以帮助我解决我的问题，将不胜感激！这是解决方法的一个片段：

以下是上述两种情况的代码沙箱：https ://codesandbox.io/s/stoic-diffie-0m2mp?file=/src/test.jsx

我有一个沙箱，它基本上是在 React 中制作的滑块，每次用户按下 Next 或 Previous 按钮时，旧数据都会被新数据替换。我想使用 framer motion 为滑块创建一些漂亮的动画，它几乎可以完美运行。我不知道为什么，但每次我按下按钮进入下一个项目（或上一个项目）时，动画将元素向下移动，然后恢复正常。

我将在下面留下沙箱的链接，这样可以更容易地可视化错误。

沙盒

我正在尝试将我的自定义反应组件 UI 库与 Rollup 捆绑在一起。

我的一些组件使用 framer-motion 对其进行动画处理

我已经在我的项目中安装了带有 NPM 的库。

但是，当我尝试使用我的库中的一个组件时，如果该组件使用 Motion 进行动画处理，则会出现错误：

我正在使用 Rollup v2.34.1，并尝试指定自定义命名导出，但它不起作用。

我不知道如何解决我的问题

谢谢 ！

反应framer-motionwhileTap 和 whileHover 道具在 iFrame 内的元素上无法按预期工作。这是一个沙盒演示：

https://codesandbox.io/s/d3rku

在 Chrome 和 Safari 中，whileHover 根本不起作用，而 whileTap 完成了一半的动画。在 Firefox 中，whileHover 有效，而 whileTap 无效。似乎鼠标事件没有在 iFrame 内正确传播。当我在 iFrame 中使用 react 渲染它们时，我也注意到其他一些库的这一点。

我只想知道是否有办法将framer-motion与Material-Ui一起使用。我试过了，但我没有得到它。

我正在使用以下内容尝试通过成帧器运动将一个简单的正方形从红色变为绿色。如果我使用具有不透明度的完全相同的代码，一切正常。同样，如果我用 x 和 y 变换正方形。但是使用填充，一旦正方形渲染它就会改变填充，并且没有过渡。经过几个小时试图理解这是为什么，我找不到答案。

在文档中它说“例如，像 x 或比例这样的物理属性将通过弹簧模拟进行动画处理。而像不透明度或颜色这样的值将使用补间动画。”

它没有提到我是否需要做更多来创建这个补间。

任何帮助将不胜感激，谢谢。

我正在尝试在进入视口时运行过渡。我希望卡片只是不透明......我的 div 中有一个代理元素，应用了背景过滤器以应用“磨砂玻璃”外观。当父级有任何类型的不透明度更改时，过滤器根本不会应用并导致笨拙的动画。这是上下文的CSS：

我也尝试对孩子应用过渡，还尝试将以下内容应用于父母和背景：

所以我遇到了奇怪的问题。所以我正在使用带有 FRAME API 的 React 和动画页面。所以我在做什么：在特定的 ScrollY 上，比如说 900，会弹出一些动画。但是，当有一个 flexbox 时，它在手机上看起来会有所不同（一行中的一个元素，而在桌面上则有一行中的 4 个元素）。因此，桌面和手机上的确切位置将不匹配，从而导致动画弹出不及时。

是否有人遇到过同样的问题，如果是，是否有解决方案？