在与帕格的反应中是否可以使用Framer Motion [英] Is it possible to use Framer Motion in React with pug

问题描述

我正在使用多种技术进行高级Reaction网页开发 我以前简单地使用AOS来动画我的Reaction组件，也尝试过GreenSock一次，但它不符合我的需要…… 我正在使用NEXT JS中的NEXT JS和PUG JS，一直到https://github.com/pugjs/babel-plugin-transform-react-pug

并希望使用Framer Motion进行相同的操作，但是 motion.div更改为<motion className="div"> 谁能帮帮我

推荐答案

在Next.js应用程序中，转到根目录下的.babelrcFill(如果未创建)并添加

{
  "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的Reaction的框架运动是很好的 还请注意：与我在一段时间内尝试的一样，没有语法突出显示

.. 如果是create-action-app，请确保在弹出(NPM弹出)后将.babelrc内容添加到.babelrc中，您将在package.json中有一个.babelrc字段，只需在该字段中添加这些插件属性。

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

现在，您必须在需要动画的任何位置使用motion.Div 而不是motion.div(即大写)

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

希望这能帮助😇

编辑：您也可以作为

添加到IMPORT=>；中

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

但您仍需在pug中使用Motion.Div

这篇关于在与帕格的反应中是否可以使用Framer Motion的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！