是否可以在带有 pug 的 React 中使用 Framer Motion

Posted 2023-02-22

【中文标题】是否可以在带有 pug 的 React 中使用 Framer Motion

【英文标题】：Is it possible to use Framer Motion in React with pug

【发布时间】：2021-04-28 23:15:09

【问题描述】：

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

并且想使用 Framer 运动来实现相同的目的，但 motion.div 更改为 <motion className="div"> 谁能帮帮我

【参考方案1】：

在 Next.js 应用程序中，转到根目录下的.babelrc fil（如果没有，则创建并添加

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

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

现在你必须在任何你想要动画的地方使用motion.Div 而不是motion.div（即大写）

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

希望这会有所帮助?

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

例如import motion as Motion from 'framer-motion';

但你还是得在 pug 中使用Motion.Div