ReactJS中Framer Motion的motion组件Variants滑动效果失效求助

你的代码编译正常但看不到动画，核心原因是只给<motion.div>绑定了variants配置，却没指定初始状态和触发动画的目标状态——Framer Motion不知道要从哪个状态过渡到哪个状态。

修复步骤 #

1. 给<motion.div>添加initial和animate属性，明确状态切换逻辑：

<motion.div 
  variants={slideIn('left', "tween", 2, 2)}
  initial="hidden"  // 初始对应variants里的hidden状态
  animate="show"    // 动画触发后切换到show状态
  className='w-[30%] flex mx-auto justify-center items-center'>
  <h1 className='text-9xl'>Fill</h1>  
  <h1 className='text-5xl'>YOUR FEEDBACK</h1>
</motion.div>

2. 额外检查项：
   • 确认已正确导入Framer Motion：import { motion } from "framer-motion";
   • 你设置了delay:2，动画会在2秒后才启动，测试时可以先把delay改成0，避免误以为动画没生效
   • 如果需要滚动到视图才触发动画，结合useInView钩子实现：

     import { motion, useInView } from "framer-motion";
     import { useRef } from "react";
     
     function YourComponent() {
       const ref = useRef(null);
       const isInView = useInView(ref, { once: true }); // 只触发一次
     
       return (
         <motion.div 
           ref={ref}
           variants={slideIn('left', "tween", 0.2, 1.2)}
           initial="hidden"
           animate={isInView ? "show" : "hidden"}
           className='w-[30%] flex mx-auto justify-center items-center'>
           <h1 className='text-9xl'>Fill</h1>  
           <h1 className='text-5xl'>YOUR FEEDBACK</h1>
         </motion.div>
       );
     }
     

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