Framer Motion动态variants修改initial属性后无法生效的问题

问题根因 #

Framer Motion 的 initial 状态仅会在组件首次挂载时，读取当前的 custom 参数完成一次状态计算。后续即使你修改了 custom 绑定的变量值，已经生成的初始状态也不会自动更新，所以动画触发时依然使用首次计算的「底部滑入」初始值作为动画起点。

解决方法 #

这里提供两种可直接落地的方案： #

方案1：绑定key强制组件重新挂载（最简单）

给 motion.div 增加绑定 origin 的 key 属性，当 origin 变更时组件会重新挂载，自动使用最新的 custom 值重新计算 initial 状态，修改代码如下：

return (
  <motion.div
    key={origin} // 新增这行即可
    style={{ width: 100, height: 50, background: "red" }}
    variants={variant}
    initial="hidden"
    animate={controls}
    custom={origin}
  />
);

方案2：手动更新初始状态（无需重挂载）

在修改 origin 的同时，调用动画控制器的 set 方法手动刷新 hidden 状态，会自动读取最新的 custom 值计算状态，修改代码如下：

useEffect(() => {
  setTimeout(() => {
    setOrigin("right");
    controls.set("hidden"); // 新增这行，手动刷新初始状态
  }, 2000);
}, [controls]);

两种方案都可以实现「从右侧滑入」的预期效果。

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