如何入门使用Framer Motion 安装后动画不生效问题排查

1. 变体定义了但未绑定生效规则，是模态框无动画的核心原因 #

• Framer Motion的variants本质是一组提前配置好的命名动画状态集合，本身不会被组件自动识别执行。必须给对应的motion组件显式指定两个绑定关系：
  • initial：组件首次挂载时加载的初始变体状态
  • animate：组件需要切换到的目标变体状态
• 你当前编写的motion.div只传入了variants={modal}配置，没有补充上述两个绑定属性，框架完全不知道需要先加载hidden的屏幕外状态、再过渡到visible的居中状态，因此不会有任何位移反馈，元素直接停在默认文档流位置渲染。

2. 静态传值给animate属性时无法触发过渡，是颜色直接跳变的原因 #

• 如果组件一挂载就直接写入animate={{color: "red"}}，框架会把这个值判定为组件的初始渲染值，不存在“从旧颜色值变化到新颜色值”的过程，自然不会触发补间动画，文本只会直接渲染为红色。
• 想要实现颜色平滑过渡，需要明确指定动画的起点值，比如搭配initial={{color: "#000"}}，框架才会自动从初始颜色值平滑过渡到目标红色。

import { motion } from 'framer-motion'

const modal = {
  hidden: {
    y: "-100vh",
    opacity: 0,
  },
  visible: {
    y: "200px",
    opacity: 1,
    transition: { delay: 0.5 }
  }
}

<motion.div 
  className="error-pop-up" 
  variants={modal}
  initial="hidden" // 新增：挂载时先从屏幕顶部外的隐藏状态加载
  animate="visible" // 新增：加载完成后自动切换到可见状态，触发位移动画
>
  {error}
</motion.div>

• 如果需要动态控制模态框的显示/隐藏，不要直接通过条件判断卸载组件，可以把animate属性和状态变量绑定，比如animate={isOpen ? "visible" : "hidden"}，框架会自动触发对应状态的进场、退场动画
• 模态框的位移数值y: "200px"需要结合自身弹窗的实际高度调整，避免因不同设备视口尺寸差异导致居中位置不准

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