问题标签 [framer-motion]

我想同时使用 Styled Components 和 Framer Motion 来设置样式和动画……我可以使用 SC 或 FM 中的变量来设置样式和动画吗？

什么是例子？

我的要求是，当ViewPager单击并拖动下一张图像的图像时，上一张图像应降低每次拖动的不透明度。这是我的代码和框代码。

这张图片是我要求的小例子。

我需要与代码和框代码相同的功能，并在将卡拖到其他卡时并行降低不透明度。如果有人在其他库中有任何其他解决方案，例如framer-motion. 这也很有帮助。

我一直在使用新的 framer 运动库来尝试将 svg 圆圈移动到新位置。它将从相对于固定位置的位置开始，所以我不能只变换圆，所以希望改用 AnimateSharedLayout。

它有点工作，但动画似乎在一条奇怪的路径中移动。动画以正确的角度移动，但看起来像是来自 svg 外部，而不是它的原始位置。我在这里设置了一个例子：

https://codesandbox.io/s/interesting-margulis-7ovme

我做错了什么还是仅仅是因为 AnimateSharedLayout 仍处于测试阶段？因为它以正确的角度移动，所以感觉它应该可以工作，但也许我只是缺少一些需要设置的其他属性/属性，因此它从正确的位置开始。

任何有关如何解决此问题或是否只是错误的建议将不胜感激。谢谢！

framer 运动的 path 标签可以与 useViewportScroll 结合使用来创建滚动信息路径。

当与 Clojurescript 一起使用时，这不起作用：

错误是：

- 编辑 -

根据答案，我改为：

并[:> path]在我的组件中使用。但是当我滚动页面时没有触发控制台日志，这表明滚动时路径长度变量没有改变，即路径组件没有随着滚动重新安装。如何解决这个问题？

我正在尝试在快速入门指南中的反应训练中对嵌套路由示例进行一些扩展。

代码沙箱：https ://codesandbox.io/s/routing-test-ubpjp

在代码沙箱浏览器中，如果您导航到 /some - 这有效，然后单击 SomeOne - 这也有效。但是，单击应该重定向到“Some”的“SomeTwo”会加载空白，为什么？

此外，这些链接无法立即工作？沙盒中可能有一些奇怪的东西，因为我一直在用随机的东西来尝试让它工作。

我只想构建路线，这样我就不必将所有这些路线都放在一个文件中。

我进行了很多搜索并尝试了很多不同类型的实现，但所有这些最终都遇到了问题/问题，无论是添加一条包罗万象的路线还是重定向。

从 Switch 中移除道具是可行的，但这会破坏帧运动中的 AnimatePresence。

以 framer-motion 为例：https ://codesandbox.io/s/framer-motion-x-react-router-n7qhp?file=/src/index.js

即使在导航和重定向组件上使用 withRouter 挂钩，重定向仍然失败。

我正在使用 framer-motion 库为 div mount 设置动画

这就是我所拥有的：

还有一个布尔显示我的组件？当我单击按钮时从 false 更改为 true （我正在使用 re-frame 来管理 boolean show-my-component？但在这里简化了代码）：

但是使用 :>div 时单击按钮时组件不会立即显示，尽管在使用常规 :div 时会立即显示，但在后一种情况下当然没有动画

使用 :> div 时，我必须重新聚焦或单击网页上的某个位置以显示我的组件

- 编辑 -

从 0 到 1 的不透明度动画是在点击时触发的，而不是在页面加载时触发的。该组件第一次没有被聚焦。当窗口重新聚焦并因此触发动画时，它会聚焦。Reagent 不会在页面加载时自动聚焦 framer motion motion.div 对象。在同样的情况下反应会。

Framer Motion 状态：

https://www.framer.com/api/motion/animation/#mount-animations "挂载动画

当组件挂载时，如果它们与 style 或 initial 中定义的值不同，它将自动为 animate 中的值设置动画。您可以将 initial prop 设置为 false 以使用 animate 中的值作为组件的挂载状态来禁用挂载动画。

<motion.div animate={{ x: 100 }} initial={false} /> 这也适用于服务器端渲染。”

组件已安装：

并且不透明度为 0。安装的 div 卡在：initial。

- 编辑 -

通过将这些添加到 :> div 地图来模拟单击时不会触发动画：

模拟点击是：

我知道我可以motion像这样直接应用于 element/HTMLtag：

但是我怎么能把它应用到这个上呢？

无需将其包装在另一个 HTML 元素中，例如在React-Transition-Group库中。

Framer API 提供了Frame组件，但它就像具有自己样式的永久附加 HTML 元素一样，它弄乱了我的布局。

我正在使用Framer 动作，并希望从 API 中获取的卡片一张一张地淡入淡出。我正在关注Framer motion的这段代码演示。

这完全可以正常工作：

而这个（刚刚更改[0,1,3]为recipes）只是将所有卡片视为一个对象，并且它们都同时动画：

这是recipes外观：

我该如何解决它，以便卡片一张一张地交错并设置动画，而不是作为一个对象？

编辑 - 完整代码：

我正在使用成帧器运动，并且我正在尝试实现交错，以便每个下一个孩子都有一些不错的延迟。有一个关键的代码行，当我突然替换时[0, 1, 2, 3].map，recipes.map所有的孩子都被视为一个巨大的块，他们不会交错。

只要看看这个演示，你一定会明白我的意思。这段代码有什么问题？我正在失去理智:)

我今天遇到了 Framer Motion 的一个奇怪问题。

出于某种原因，这个片段（从他们的网站复制和粘贴）不起作用，只有不透明度是动画的

希望各位大侠能帮帮忙，先谢谢了！