如何让Framer Motion完成坐标计算后再启动动画？

问题场景 #

你定义了控制元素隐藏位置的状态变量x、y，以及对应的Framer Motion动画变体，但第一次执行隐藏动画时，坐标计算逻辑还未完成，导致x、y仍为初始值0，动画不符合预期。需要让动画暂停到坐标计算完成后再执行。

可行解决方案 #

1. 给exit动画添加动态延迟，绑定坐标计算状态

新增一个状态标记坐标是否计算完成，初始为false，当你的复杂坐标计算逻辑执行完毕后，将其设为true。然后修改动画的transition配置：

const [isCoordsCalculated, setIsCoordsCalculated] = useState(false);

// 你的坐标计算逻辑完成后执行
// setX(targetX);
// setY(targetY);
// setIsCoordsCalculated(true);

const transition = {
  duration: 0.5,
  // 只有当坐标计算完成后才开始动画，否则延迟（数值可根据计算耗时调整）
  delay: isCoordsCalculated ? 0 : 0.5
};

这样exit动画会等待isCoordsCalculated变为true后才启动，确保x、y已经是计算后的目标值。

2. 控制AnimatePresence的exit动画触发时机

利用Framer Motion的属性手动控制元素的卸载时机，等坐标计算完成后再让元素退出：

<AnimatePresence>
  {!context.isGrouped(towerId2) ? (
    <motion.div 
      initial="hidden" 
      animate="visible" 
      exit={isCoordsCalculated ? "hidden" : false} 
      variants={fromXYVariant}
    >
       <div>...</div>   
    </motion.div>
  ) : null}
 </AnimatePresence>

这里exit属性会在isCoordsCalculated为true时才触发隐藏动画，否则不执行退出动画，直到坐标计算完毕后再触发。

3. 直接在exit变体中使用条件式transition

如果不想新增状态，也可以通过判断x、y是否为初始值来动态设置延迟（适合计算结果不会是(0,0)的场景）：

const fromXYVariant = {
  visible: {
    y: 0,
    x: 0,
    transition: { duration: 0.5 }
  },
  hidden: {
    x,
    y,
    transition: {
      duration: 0.5,
      // 当x或y还是初始值0时，延迟动画，否则立即执行
      delay: (x === 0 && y === 0) ? 0.5 : 0
    }
  }
};

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