Reactjs 帧运动-不透明度转换在开发中起作用，但在部署时不起作用

我在React中使用帧运动在页面之间进行简单的不透明度转换。所有页面的motion.div如下所示：

<motion.div exit={{ opacity: 0 }} animate={{ opacity: 1 }} initial={{ opacity: 0 }}>

(div contents)

</motion.div>

（部门目录）

我在motion.div中有一个div-#div主菜单，它应该具有80%的恒定不透明度。这种设置在开发中运行良好（从0转换到100%不透明度），但当我构建项目并将其部署到服务器时，#div主菜单仅转换到1%不透明度（即几乎不可见）。我不明白为什么这只发生在部署时，而不是在开发中，我想知道如何修复它。任何帮助都将不胜感激。

请尝试：

import { useCycle } from "framer";
//define variable
const [animate, cycle] = useCycle(
    { opacity: 1 },
    { opacity: 0 }
);

<motion.div animate={animate} onTap={() => cycle()}>

(div contents)

</motion.div>

从“framer”导入{useCycle}；
//定义变量
常量[动画，循环]=使用循环(
{不透明度：1}，
{不透明度：0}
);
循环（）}>
（部门目录）

如果到处都有，我建议在每个文件中创建一个导入的常量：

export function yourFunctionName({content}){
  const [animate, cycle] = useCycle(
    { opacity: 1 },
    { opacity: 0 }
  );
  return (
    <motion.div animate={animate} onTap={() => cycle()}>

    {content}

    </motion.div>
  );
}

导出函数yourFunctionName（{content}）{
常量[动画，循环]=使用循环(
{不透明度：1}，
{不透明度：0}
);
返回(
循环（）}>
{content}
);
}

然后您不能将您的FunctionName的导入添加到您的导入中，

import{yourFunctionName}来自“./../path”

并使用
一些文本每个文件的组件