我希望每次新用戶前置，第一個div有css動畫，但我的代碼只對第一次前置工作，第二次前置動畫不觸發

const [userList, setUserList] = useState<any>([]);
<div className='user-listing absolute top-0 left-0'>
    {
        userList.map((user:any, index:number)=>{
        return (
            <div key={index} className='user'>{user}</div>
        )
        })
    }
</div>
<button onClick={()=> setUserList((list:any) => [randomUser(),...list])}>
  add
</button>

.user-listing{
  .user{
    &:first-child {
      animation-name: fadeIn;
      animation-duration: .15s;
    }
  }
}

@keyframes fadeIn {
  0% {
      opacity: 0;
      transform: scale(.2)
  }

  to {
      opacity: 1;
      transform: scale(1)
  }
}

現在的情況是，key prop在列表的第一個元素中保持不變，因此React將更新包含現有鍵的元素，并在列表的末尾用一個新的鍵創建一個新的元素。

首先，您有一個帶有0鍵的新元素，因此動畫將會播放。然后，在用戶列表中添加一個元素，但是在DOM中，鍵為0的元素將保留在列表的頂部，因此它不是DOM的新元素，而是用新用戶的名稱更新的相同元素。新元素將是具有鍵1的元素(并且將使用已經存在的用戶的數據來創建)等等...

這就是為什么使用數組的索引作為鍵不是一個好主意。

因此，如果您希望為添加到數組中的每個新元素播放動畫，您必須使用唯一的鍵來標識用戶(例如，它的id，它是最佳選項，或者它的名稱)。在您的例子中，用戶似乎只是一個字符串，所以您應該這樣使用它:

userList.map((user: any) => {
  return (
    <div key={user} className='user'>{user}</div>
  )
})

希望說清楚:)