https://i.imgur.com/drQmJn5.mp4
最初的結果是完美的影片。交錯淡入。
但是，所有 AFTER 的結果都只是突然出現并且沒有影片。我不明白為什么更新的結果也沒有影片。
目前的代碼如下所示：
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>
))}
uj5u.com熱心網友回復：
key您不應將回圈索參考作PostListItem. 由于索引（以及鍵）總是相同的，因此它不會讓 Framer 跟蹤何時添加或洗掉元素以對其進行影片處理。
id而是為每個元素使用一個值，如唯一屬性。這樣 React（和 Framer）將知道它何時渲染不同的元素（與具有不同資料的相同元素相比）。這就是觸發影片的原因。
這里有一個更徹底的解釋：
react key props and why you should be using index
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/443312.html
上一篇：堆積條形圖：如何定義填充
下一篇：將分頁器指示器影片化為按鈕