Framer Motion layout布局动画异常 图片筛选重排失效如何修复

出现异常拉伸的核心原因是layout动画的元素配置和DOM移除逻辑不对，按下面的步骤改就能实现平滑无变形的重排效果：

• 首先修正layout属性的配置范围：只给画廊网格的直接子元素（也就是单个图块卡片）加layout属性，不要给外层网格容器加layout，否则会触发整个网格的尺寸插值计算，直接导致变形。
• 卡片内部的图片标签要加layout="position"属性，告诉Framer Motion图片只参与位置过渡，不做尺寸插值，同时给卡片容器设置固定的aspect-ratio样式，从根源避免动画过程中内容拉伸：

// 单个图块组件正确写法
<motion.div
  layout
  className="gallery-item"
  style={{ aspectRatio: '4/3' }} // 按你的图片实际比例设置
  transition={{ duration: 0.35, ease: 'easeOut' }} // 统一动画参数，避免默认弹簧参数导致的抖动
>
  <motion.img
    src={item.url}
    alt={item.name}
    layout="position" // 关键配置，图片仅做位移动画
    className="item-img"
  />
</motion.div>

• 筛选逻辑不要直接过滤DOM元素，用AnimatePresence包裹整个图块列表，加上mode="popLayout"配置：这个配置会自动让被筛选掉的元素先脱离文档流，再触发剩余元素的layout位置计算，不会出现动画帧冲突的问题：

import { motion, AnimatePresence } from 'framer-motion'

// 画廊容器渲染逻辑
<div className="gallery-grid">
  <AnimatePresence mode="popLayout">
    {currentFilteredList.map(item => (
      <GalleryItem key={item.id} item={item} />
    ))}
  </AnimatePresence>
</div>

避坑提醒：如果给卡片加了圆角、阴影这类样式，不要把这些样式加在内部图片上，统一加在带layout属性的卡片外层容器上，否则动画过程中会出现样式跳变。

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