应用运动来反应组件 Framer-Motion

Question

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

<motion.div>some content</div>

但是我该如何将其应用到此呢？

<Comp />

不将其包装在另一个 HTML 元素中，就像在 React-Transition-Group 库中一样。

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

Answer 1

不使用任何内部函数，你只需要用任何运动元素包裹它:

<motion.div>
  <Comp />
</motion.div>

您可以在文档中的示例中注意到此类行为，例如 Side Menu example.

Answer 2

如果有人来到此页面寻求如何将 motion 从 Framer-Motion 库应用到您的 React 组件的解决方案并且不是直接 DOM 元素，如“div”或“span”，这里是：

motion.custom()

使用示例：

import { Link } from "react-router-dom"

const MotionLink = motion.custom(Link)

return <MotionLink />

至于今天在official documentation中并没有提到，或者在某个很深的地方，很难找到。

我在 BUG 报告 here, there is a Codesanbox 中找到了它，它说明了我的示例，由报告错误的人创建。

Answer 3

motion.custom 自 v4.0 起弃用，取而代之的是 motion(Component) 或 motion("Component").

您的代码看起来像这样

const MotionComp = motion(Comp)

return <MotionComp>some content</MotionComp>

Apply motion to react component Framer-Motion