问题标签 [framer-motion]

我在使用framer-motion AnimatePresence 组件时遇到问题。

在幻灯片之间切换时，幻灯片的布局会“缩小”片刻，然后再恢复到所需的尺寸。经过一些调试，我很确定这是因为AnimatePresence同时渲染两张幻灯片一小会儿，但是我没有设法解决这个问题。

这是一个演示该问题的沙盒。

使用 Framer Motion'suseTransform我想使用MotionValue百分比（例如75%）而不是像素来更改元素的宽度。

默认假设像素：

我想要以下内容：

这显然行不通。

如何指定 myMotionValue是百分比而不是基于像素的？

或者，我可以使用filter: scale()，但这会导致内容模糊（是的，我已经研究过如何解决这个问题，但没有取得任何成功）。

在下面的示例沙箱中，我有一个父 React Router 渲染两个动画组件。

https://codesandbox.io/s/frame-motion-x-react-router-x-simple-tb1wg?file=/src/Routes.tsx

其中一个包含自己的嵌套链接——每个链接都有自己独立的成帧运动动画。当我单击路由链接时，我需要停止嵌套开关的父级重新渲染。我可以看到问题与在两个级别上使用 switch 键有关，但我不知道用什么替换它以停止重新渲染组件层次结构的更高层。如果我删除密钥，它会破坏动画。

脚步：

选择关于。注意正确的进入和退出动画。选择联系人。注意正确的进入和退出动画。选择 Child 1. 注意不需要的父组件重新渲染 select Child 2. 注意不需要的父组件重新渲染 注意：

• 我添加了一些内联的 Math.random() 调用，这些调用在重新渲染时会发生变化
• 我已经包含了一个没有动画的顶级链接，以演示嵌套组件在安装时按预期动画。但是，它仍在重新呈现子链接的选择。

location.pathname 键在选择深层嵌套链接时强制重新渲染。我可以用什么明智地替换它，以免它重新渲染？我试过删除它，但这会破坏动画。

谢谢

我正在尝试使用 react-testing-libary 测试拖放功能。拖放功能来自 framer-motion，并且代码处于响应状态。据我了解，它使用 mousedown、mousemove 和 mouseup 事件来执行此操作。我想测试以下基本组件的拖放功能：

我有一个测试片段如下：

但是，我无法让测试成功通过，因为transform我测试的值设置为none. 它不会使用更新的 CSS 更新它的值。我认为存在某种异步问题或动画延迟，因此未检测到 mousemove 并且转换的值不会改变。有人知道如何让测试工作或测试 mousemove 更改的方法吗？

任何有关如何解决此问题的建议或指导将不胜感激！

我有以下代码：

假设它必须在安装 and 时执行淡入动画，并在卸载时淡出。安装动画发生，但另一个没有。在动画效果开始之前，这两个组件都已卸载，并且所有动画库都会出现问题：、和其他。<Hi/><Something/>framer-motionreact-transition-group

我正在使用带有 Framer Motion 的 NextJs。一切正常，但我收到了这个警告：

我在让成帧器动作“staggerChildren”过渡到一个简单的项目列表时遇到了一些问题。它基本上允许子组件的动画交错。

我为父容器和子容器设置了这样的动画属性：

然后我获取一组项目并将其保存到我的用户状态。最后只是一个简单的地图来渲染该数组中的一些数据。

问题是这些项目在渲染时不会交错并最终同时淡入。我不确定为什么。示例：https ://codesandbox.io/s/wispy-shape-9bfbr?file=/src/Example.js

如果我改为使用存储在变量中的静态项目数组，然后只使用完全相同的循环，我可以让转换工作。像这个工作示例：https ://codesandbox.io/s/late-http-vz1s6?file=/src/Example.js

但我需要它来处理我在 useEffect Hook 中获取的数组。有谁知道怎么做？

我正在使用Framer Motion为Next.js页面过渡设置动画。但是，使用使用AnimatePresence会破坏hash链接导航，并且页面不再转到目标id元素。

页面转换是完美的，直到您想要导航到页面上的苛刻 ID :(

我有一个_app.tsx如下所示的自定义。

我希望直接进入该部分，id="the-team"但它不起作用。使用哈希链接刷新页面显示它最初位于目标元素但很快跳转到顶部。它是如此快速和容易错过。如何保留页面转换但仍然能够导航到哈希 id？

我对两个动画库（react-spring、framer-motion）有疑问。我试图在组件第一次可见时制作简单的动画。（这是简化版）

<motion.div initial={{x: -25, opacity: 0}} animate={{x: 0, opacity: 1}} transition={{duration: 2.5}} className="App-logo">NAME</motion.div>

Github 项目

它在 Chrome、Brave、Edge 上看起来非常流畅，但在 Firefox 上它在动画结束时看起来很滞后。此示例基于 framer-motion，但在 react-spring 中看起来相同。当 transition-duration 更短而 translateX 更长时，它看起来更好，但仍然不是流畅的动画（并且更改适用于其他浏览器的属性不是解决此问题的方法）。火狐（76.0.1）（操作系统 Win10）。

我尝试使用清晰的 css 制作相同的动画，并且在每个浏览器上看起来都很流畅。我正在寻找解决问题的方法，但没有找到任何特定的答案。

我在过去几天学习反应。我一直在玩反应路线的幻灯片动画，并使用 Framer Motion。但是，我累了很多次，无法让它正常工作。

由于某种原因，动画中的幻灯片不正确，下一条路线就像立即弹出一样。

我想实现新页面滑入而卸载页面滑出的效果。我无法同时获得两页幻灯片。

我已经粘贴了这个沙箱。 https://codesandbox.io/s/react-router-transition-with-framer-motion-s81tc?file=/src/App.js

任何帮助，将不胜感激。

谢谢。