React中Framer Motion退出动画异常：图片滑块切换方向时动画错误

问题核心 #

正如你判断的，问题出在已挂载DOM元素的退出动画配置未随切换方向更新。首次反向切换时，即将退出的元素仍沿用之前的动画参数，导致动画方向与预期相反。

可行解决办法 #

方案1：通过唯一Key强制元素重新渲染

给每个滑块元素设置包含当前切换方向的key，当方向改变时，React会识别为新元素并重新挂载，从而使用最新的动画配置：

// 假设direction为切换方向状态，值为'up'或'down'
<motion.div
  key={`slide-${currentIndex}-${direction}`}
  initial={{ y: direction === 'down' ? '-100%' : '100%' }}
  animate={{ y: 0 }}
  exit={{ y: direction === 'down' ? '100%' : '-100%' }}
>
  {/* 图片内容 */}
</motion.div>

每次方向变化时，key会同步更新，旧元素将带着新的退出动画参数执行退场动作，不会再出现方向错误。

方案2：利用AnimatePresence的custom属性传递方向

借助AnimatePresence的custom属性将当前方向传递给退出动画，让动画配置动态依赖该参数：

<AnimatePresence custom={direction}>
  <motion.div
    initial={{ y: direction === 'down' ? '-100%' : '100%' }}
    animate={{ y: 0 }}
    exit={(custom) => ({ y: custom === 'down' ? '100%' : '-100%' })}
    key={currentIndex}
  >
    {/* 图片内容 */}
  </motion.div>
</AnimatePresence>

这里退出动画以函数形式存在，接收custom参数（即当前切换方向）并动态计算退场位置，无需重新渲染元素即可实现正确的方向动画，性能更优。

建议优先尝试方案2，若场景存在依赖key的其他逻辑，再选用方案1。 #

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