javascript - 应用运动来反应组件 Framer-Motion
问题描述
我知道我可以motion
像这样直接应用于 element/HTMLtag:
<motion.div>some content</div>
但是我怎么能把它应用到这个上呢?
<Comp />
无需将其包装在另一个 HTML 元素中,例如在React-Transition-Group
库中。
Framer API 提供了Frame
组件,但它就像具有自己样式的永久附加 HTML 元素一样,它弄乱了我的布局。
解决方案
如果有人来到这个页面寻求如何motion
从 Framer-Motion 库应用到您的 React 组件而不是像“div”或“span”这样的直接 DOM 元素的解决方案,这里是:
motion.custom()
使用示例:
import { Link } from "react-router-dom"
const MotionLink = motion.custom(Link)
return <MotionLink />
至于今天官方文档中没有提到,或者在某个地方很深,很难找到。
我在这里的 BUG 报告中找到了它,有一个Codesanbox说明了我的示例,由报告错误的人创建。
推荐阅读
- firebase - 分页数据表和 Firebase
- python - 如何使用一些附加条件对我的数据帧执行 vlookup 等效操作
- javascript - setTimeout vs WebWorker vs XMLHttpRequest
- php - 如何在不调用递归循环函数的情况下将值传递给变量并返回它?
- .net-core - 找不到证书 - Azure .NET Core 应用程序
- c++ - 强制 GCC 将特定语句放在特定部分
- python - Python & API 用户输入
- python - 将列值四舍五入到最接近的 10,然后显示满足条件的每个组的百分比
- java - 无法从 Activity 到 Fragment 获取值,NullPointerException
- html - CSS 不均匀 div 定位