React使用framer-motion实现两张图片同时入场退场动画的方法

算力阿峰

2026-9-25

问题修复方案

核心原因

你遇到的入场动画未触发的问题，核心是framer-motion的AnimatePresence依赖子元素的唯一key识别元素的新增和移除，没有配置唯一key时，框架会默认切换前后的是同一个元素，仅会触发旧元素的退场动画，不会识别新元素触发入场。

具体修改步骤

给动态切换的motion.img添加唯一key属性，取值可以直接用当前图片的索引或者资源地址：

<AnimatePresence>
  <motion.img
    key={currentImgIndex} 
    initial={{ y: '-100%' }}
    animate={{ y: 0 }}
    exit={{ y: '100%' }}
    transition={{ duration: 0.5, ease: "easeInOut" }}
    src={imgList[currentImgIndex]}
  />
</AnimatePresence>

调整容器样式，保证两张图片动画过程中叠加在同一位置，不会出现布局偏移：

/* 图片外层容器样式 */
.login-img-wrapper {
  position: relative;
  width: 100%;
  height: 你需要的容器高度;
  overflow: hidden;
}
/* motion.img 公共样式 */
.login-img-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}