问题标签 [framer-motion]

我在使用成帧器动作使动画工作时遇到了一些问题。任何帮助将不胜感激。

代码沙箱示例

我正在使用带有 React Router 的 Framer Motion 在不同的路由之间创建动画。

我遵循了本教程：https ://www.youtube.com/watch?v=qJt-FtzJ5fo

我将尝试将问题总结为以下几点：

我正在使用 React Router v6 进行路由，我的应用程序上有多个嵌套路由和并行开关，这是一个简单的目录。

我为每个页面的 {content} 组件添加了转换，并将 {footer} 和 {header} 组件留在不同的开关上，以防止它们产生动画。

我还向 switch 组件添加了 location={location} key={location.pathname} 并将 exitBeforeEnter 添加到 AnimatePresence 包装器。

当访问一个目录的项目时，问题变得很明显，其路径是“es/:catalogid/:id”，它是动态的并显示为上一页的覆盖。访问这些路由会影响上一个路由，位于“/es/”，并触发动画。

一个人将如何防止这个问题？

Framer Motion 和 React 路由器 5：如何防止使用嵌套路由重新渲染父组件？这几乎是完全相同的问题，但是代码和框不起作用，解决方案也不是。

谢谢阅读。

我正在构建一个使用 gatsby/react/react-bootstrap/framer-motion 的网站。我遇到了 framer-motion 覆盖我的 react-bootstrap css 的问题？我宁愿不将所有响应重新设计回这些元素，并且想知道是否有办法让这两个库相互配合？试图让 framer-motion 做出响应似乎令人头疼……我可能只是为不同的视口设计，但 idk。

这是我的代码：

这是我的CSS：

任何帮助都非常感谢！！！！

浏览器控制台错误

App.js（包含在 BrowserRouter 中）

Home.js/Articles.js

谁能解释导致错误的原因？

我想在 React.js 中使用 Framer Motion 创建一个动画轮播。这个想法是在单击按钮时看到两个 div 彼此水平变化。

当我这样做时AnimatePresence，第一个 div 会缩小，因为第二个 div 是同时创建的。 在这里您可以看到代码沙箱。

我已经尝试使用exitBeforeEnterprop，但它不适用于我的用例。我想同时看到两个变化的 div。使用 exitBeforeEnter，这是不可能的。

我还尝试将Slide组件的位置设置为absolute. 这样做的问题是，容器的所有 flex 属性都会丢失。容器不适应它的高取决于Slide组件。

那我该怎么办？

display:none一旦孩子们交错动画完成，我正在尝试设置父元素。我的li元素淡出，然后父元素ul应该更新为display:none

我可以在过渡中设置延迟，但尝试利用when属性。我努力了：

显然，我的语法不正确或无法按我的意图使用。

沙盒演示

我正在开发一个 React 项目，在该项目中，当组件滚动查看时，我会在其中设置动画。我正在使用 Framer Motion。我怎样才能使动画仅在您第一次滚动组件时触发？

现在，如果我向下滚动页面，动画会按预期工作。但是，如果我刷新或离开页面并返回，动画将再次触发。滚动到页面中间，刷新，然后向上滚动将在之前滚动的组件上触发动画。

我知道这是 Framer Motion 在组件重新安装时从初始值变为动画值的默认行为。我希望在之前在用户视口中的组件上防止这种行为。

下面发布了其中一个组件的示例代码。任何帮助表示赞赏。

情况

我使用React Portals构建了一个 React Modal组件（参见上面的文档）。在单击关闭按钮时卸载组件之前，我想使用AnimatePresence运行带有 Framer Motion 的动画。不幸的是，我无法让它工作，需要帮​​助。exit

链接

• React 门户文档
• Framer Motion AnimatePresence 文档
• 反应模态文件

我试过的

我添加exit={{ opacity: 0 }}到<RenderModal/>. 进入动画使用initial并按animate预期工作。

1. 环绕<AnimatePresence>modal-root元素

2. 包装为 modal-root 的子节点

错误：目标容器需要 DOM 元素

3. 环绕组件元素

4. 环绕使用的组件

I am trying to animate an image with Framer Motion:

utils/MonkeyPicture.js

So I would need a function that only adds or activates the atributes: transition={{ duration: 0.5 }} animate={{ rotate: [0, -30, 0]}} When I click on a Button.

The picture is rendered the whole time, I just wish to rotate it when I click a button.

The onClick method is in the AddTodo.js container:

我遇到了 framer-motion AnimatePresence 组件的问题。我试图在组件在视口中可见后启动动画，为了实现这一点，我使用了 react-intersection-observer。它按预期用于开始动画，但退出动画中断，我不确定是什么导致了问题。我在https://codesandbox.io/s/holy-dream-rb5gu?file=/src/index.js创建了一个沙箱来重现此行为