React项目中Framer Motion实现MUI按钮加载淡入动画失效求助

你的代码里有几个关键问题导致动画失效，逐一修正即可：

• 错误使用AnimatePresence：AnimatePresence是用来处理组件**挂载/卸载（条件渲染）**时的动画，页面初始加载的组件不需要这个包裹，直接移除它就行。
• duration属性位置错误：duration是动画过渡的配置项，不能放在animate对象里，需要单独写在transition属性中。
• 组件类型匹配问题：如果你的Button是Material-UI组件，将component设为motion.button比motion.div更合理（因为Button本质是button元素），避免样式或行为冲突。

修正后的代码示例：

import React, { Component } from 'react';
import { motion } from "framer-motion"
// 假设你用的是Material-UI Button
import Button from '@mui/material/Button';

class YourComponent extends Component {
  render() {
    return (
      <Button 
        component={motion.button} 
        initial={{ opacity: 0 }} 
        animate={{ opacity: 1 }}
        transition={{ duration: 1 }} // 这里配置动画时长，单位是秒
        type="submit" 
        variant="outlined" 
        size="medium"
      >
        Continue
      </Button>
    );
  }
}

export default YourComponent;

如果是自定义Button组件，也可以直接用motion.button替代普通button，或者把Button包在motion.div中（但要注意样式继承）：

// 自定义Button的情况
<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 1 }}
>
  <Button type="submit" variant="outlined" size="medium">
    Continue
  </Button>
</motion.div>

内容的提问来源于stack exchange，提问作者spirito8666