无法在即时搜索结果上使用 Framer Motion 吗？动画更新 .map() 函数

Question

https://i.imgur.com/drQmJn5.mp4

最初的结果是完美的动画。交错淡入。

但是，之后的所有结果都突然出现并且没有动画。我不明白为什么更新后的结果不是动画的。

代码目前如下所示：

const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      
      transition: {
        staggerChildren: 0.3
      }
    }
  };

  const listItem = {
    hidden: { opacity: 0},
    show: { opacity: 1}
  };




<PostList  
  variants={container} 
  initial="hidden" 
  animate="show"
  as={motion.ul}>

{results && results.slice(0, 2).map((result, i) => (
  <PostListItem
    as={motion.li}
    variants={listItem}
    key={i}
  > blah blah
  
  </PostListItem>
 ))}

Answer 1

您不应将循环索引用作 PostListItem 中的 key。由于索引（以及因此键）将始终相同，因此它不会让 Framer 跟踪何时添加或删除元素以对其进行动画处理。

而是为每个元素使用唯一的值 id 属性。这样 React（和 Framer）就会知道它何时渲染不同的元素（相对于具有不同数据的相同元素）。这就是触发动画的原因。

这里有更详尽的解释：
react key props and why you shouldn’t be using index

无法在即时搜索结果上使用 Framer Motion 吗？动画更新 .map() 函数

Is it impossible to use Framer Motion on instant Search Results? Animating an updating .map() function

animation

reactjs

framer-motion