我正在为我的高级 React 网页开发使用多种技术我以前使用 AOS 来简单地为我的react组件设置动画，也尝试过 GreenSock 一次，但它不符合我的需求......我在 Next js 中使用 Next js 和 pug js 通过https://github.com/pugjs/babel-plugin-transform-react-pug
并想使用 Framer 动作，但
motion.div更改为<motion className="div">
Can有人请帮帮我
是否可以在带有 pug 的 React 中使用 Framer Motion
IT技术
reactjs
next.js
pug
jsx
framer-motion
2022-07-07 01:53:14
1个回答
在 Next.js 应用程序中，转到 .babelrc根目录下（如果没有创建并添加
{
"plugins": [
["transform-jsx-classname-components", {
"objects": ["motion"]
}]
]
}
很好，你final .babelrc应该看起来像
{
"presets": ["next/babel"],
"plugins": [
"transform-react-pug",
[
"transform-jsx-classname-components",
{
"objects": ["motion"]
}
],
"transform-react-jsx"
]
}
这很适合使用 pug 进行 React 的成帧器运动并且还请注意：没有语法高亮显示与我尝试过的相同
..如果是create-react-app，请确保在弹出（npm弹出）后添加.babelrc内容，您将有一个“babel”字段，只需在该字段中添加这些插件属性..package.jsonpackage.json
这仍然不是确切的解决方案，
现在你将不得不使用
motion.Div任何你想要的动画而不是motion.div（即大写）
无论如何，这意味着您不能直接为元素设置动画，但可以为元素设置动画，您将始终需要使用 motion.Div 或 motion.Span ...
希望这有帮助😇
编辑：您也可以添加到 import => as
例子import {motion as Motion } from 'framer-motion';
但是你仍然必须Motion.Div在哈巴狗中使用