是否可以在 React 中使用 Framer Motion 和 pug

Question

我正在使用多种技术进行高级 React 网页开发我以前使用 AOS 简单地为我的反应组件设置动画，也尝试过一次 GreenSock 但它不符合我的需要...... 我通过 https://github.com/pugjs/babel-plugin-transform-react-pug

在 Next js 中使用 Next js 和 pug js

并且想要使用 Framer motion 同样但是 motion.div 更改为 <motion className="div"> 谁能帮帮我

Answer 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 eject) 后在 package.json 中添加 .babelrc 内容，您将在 package.json 中有一个“babel”字段，只需添加这些插件属性在该字段中..

这仍然不是确切的解决方案，

Now you will have to use motion.Div wherever you want animations instead of motion.div (i.e, uppercase)

无论如何，这意味着您不能直接为元素设置动画，但可以为元素设置动画，您将始终需要使用 motion.Div 或 motion.Span...

希望对您有所帮助

编辑：您还可以添加到 import => as

示例import {motion as Motion } from 'framer-motion';

但是你还是得在哈巴狗中使用Motion.Div

是否可以在 React 中使用 Framer Motion 和 pug

Is it possible to use Framer Motion in React with pug

reactjs

next.js

pug

jsx

framer-motion