问题标签 [framer-motion]

对于客户，我们正在构建水平拖动的媒体项行。使用 Framer-Motion 水平拖动效果很好，但我无法在单击按钮时为 x 位置设置动画。

这是一般的想法：

这是我目前拥有的组件（为简洁起见，我删除了样式等）：

所以当我x.set()在箭头上单击左或右时我会这样做。做x.set()作品，但它不是动画。

而不是const x = useMotionValue(0)我可以使用useSpringor useTransform，但这会破坏拖动行为。

所以简而言之，我想为 制作动画x.set()，但我不知道该怎么做。有人有想法吗？

我正在尝试使用 Framer Motion 在 React 中制作组件轮播。孩子AnimatePresence需要一个键，所以我决定传递一个页面状态作为键。但是，这样做会使我尝试渲染的组件重复。我认为这是因为密钥最终会被重用，所以我制作了一个函数，生成一个随机字符串用作密钥，但这也复制了组件。

使用轮播的组件

我不确定如何在片段编辑器中使用像 Framer Motion 这样的库，所以我把它放在了 CodeSandbox

当我不使用键时，它按预期工作，但是每当我单击其中一个箭头按钮时，它都会引发以下警告

PS我知道最终页面值将超出长度的范围projects，我计划在我可以解决这个问题后修复它。

我正在尝试在 React 中使用 Framer Motion 制作轮播，但我遇到了一个视觉错误。以前的组件在新组件之前没有被卸载，我得到了一个奇怪的效果。这个Gyazo

这是处理一切的组件：

我不知道如何在片段工具中使用像 framer-motion 这样的库，所以这是 CodeSandbox 上的精简版

我创建了一个动画模态容器，它在大多数情况下都可以正常工作，唯一的问题是在执行退出动画后需要一两秒才能卸载（在此期间无法单击其他任何地方）

代码沙箱 - https://codesandbox.io/s/restless-platform-oovo1?file=/src/App.js

查看问题

• 单击显示模式按钮
• 单击任意位置以关闭模式
• 请注意，滚动条仍然存在，表示模式未卸载
• 此外，您不能在退出动画后单击打开模态按钮立即重新打开模态（1 秒）

我看过safeToremove但不明白如何使用它，因为没有适当的文档

所以我有这个手风琴布局react-router-dom使用一种非常规的标记结构。

演示： https ://codesandbox.io/s/falling-violet-kvqn2?file=/src/Case.js

一个手风琴头的缩短代码：

我正在尝试framer-motion在手风琴页面之间制作动画。就像下面的 gif

您可以看到它可以很好地为in过渡设置动画。但是很难exit在页面更改时为道具设置动画。单击手风琴标题，内容突然隐藏。看起来它正在从 DOM 中删除，而不考虑AnimateSharedLayoutor AnimatePresence。我尝试添加exitBeforeEnter道具，但它不起作用。

有任何想法吗？

我正在尝试将我的头包裹起来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

https://codesandbox.io/s/keyframe-plus-whilehover-zodx7?file=/src/App.js 如果将关键帧动画应用于组件，则像 whileHover 或 onTap 这样的任何事件都不会在该 motion.div 上起作用. 使用样式组件为 div 设置动画的原因有时是帧运动，例如在关键帧动画期间无法更改 z-index。我正在尝试将 styled-component 与 framer-motion 结合在一起。

如何使用成帧器运动对 dom 重新排序进行动画处理（或过渡）？我读过一种称为 FLIP 的技术（在此处提到，但我不确定如何将其实现到成帧器运动中。

Framer Motion 在子组件中传递事件处理程序时遇到问题。

下面的沙箱： https ://codesandbox.io/s/framer-motion-svg-checkbox-forked-vgrre?file=/src/Example.tsx

预期的行为是，当我将鼠标悬停在黑色圆圈上时，会出现一个胶囊形状的图标。当我将光标移出圆圈时，胶囊形状图标将消失。在上面的示例中，如果我将 onMouseEnter 和 onMouseOut 放在 CircleBackground 组件中，它们将不起作用。（就像我现在拥有的那样）但是如果我将它们移动到 <motion.svg>，那么当悬停在 svg 容器上时会出现胶囊形状图标。但目的是让胶囊形状仅在我将鼠标悬停在圆圈上时出现，而不是在 svg 容器上。因为我在空白处悬停时不需要动画。

希望我把我的问题说清楚了。谢谢

当我将“exitBeforeEnter”道具添加到具有嵌套路由的 Animate Presence 组件时，这些路由根本没有呈现，但是当我刷新它们呈现的页面时，删除此道具或直接转到该组件将修复它，但我需要使用 react-router 中的 prop 和重定向组件

这是我的代码：