应用运动以对成帧器运动做出反应

Question

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

<motion.div>some content</div>

但是我如何将其应用于此？

<Comp />

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

Framer API提供了Frame组件，但它的作用类似于具有自己样式的永久附加HTML元素，并且弄乱了我的布局。

Answer 1

如果有人来此页面寻求解决方案，以解决如何将Framer-Motion库中的motion应用于您的React组件，而不是不直接使用DOM元素（例如“ div”或“跨度”，这里是：

motion.custom()

使用示例：

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

const MotionLink = motion.custom(Link)

return <MotionLink />

今天，official documentation中没有提到它，或者它在某个地方很深且很难找到。

我在BUG报告here中发现了它，有一个Codesanbox说明了我的示例，该示例由报告错误的人创建。

Answer 2

您不能直接将motion应用于自定义组件。

这很有意义，因为否则您的组件将被注入所有framer-motion API属性，而这并不是您想要的。

因此要将动画应用于自定义组件，您需要将其与任何运动元素一起包裹：

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

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