为什么这个布局动画不起作用？

Question

The animation that I tried to replicate

代码时间戳：34:15-34:45

动画演示的时间戳：34:47-34:54

通过link更容易形象化， 但基本上过滤后的项目移动到目的地而不是简单地过滤

css 视频中使用的属性

.popularMovie{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-column-gap: 1rem;
  grid-row-gap: 2rem;
}

视频中的动画基本上只用了2个motion.div和2个layout属性， 使用的 css 也被复制，但效果不可重现 下面是我制作的代码沙箱示例，

Minimal reproducible example

Answer 1

答案是：

1. 不要错过内部组件的key 属性：

<motion.div key={item.id} layout className="box">

2. 确保 key 属性 是 唯一的 （例如，不要使用 filtered.map((item, i) => <h2 key={i}/>)）