英文:
React: css animation
问题
I've translated the code parts for you:
const [userList, setUserList] = useState([]); // 这是你的用户列表状态
<div className='user-listing absolute top-0 left-0'> // 用户列表的容器
{
userList.map((user, index) => {
return (
<div key={index} className='user'>{user}</div> // 用户项
)
})
}
</div>
<button onClick={() => setUserList((list) => [randomUser(), ...list])}>
添加
</button>
.user-listing{
.user{
&:first-child {
animation-name: fadeIn; // 第一个用户项的 CSS 动画名称
animation-duration: .15s; // 动画持续时间
}
}
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: scale(.2); // 动画起始样式
}
to {
opacity: 1;
transform: scale(1); // 动画结束样式
}
}
英文:
I want every time new user prepend, first div have css animation, but my code only work on first prepend, second time prepend animation not trigger
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)
}
}
答案1
得分: 2
以下是翻译好的部分：
"现在发生的情况是，key 属性在列表的第一个元素中保持不变，因此React将更新包含现有键的元素，并在列表末尾创建一个新的元素，具有新的键。"
"首先，您有一个具有键0的元素是新的，因此动画将播放。然后，您在用户列表中添加一个元素，但在DOM中，具有键0的元素将保持在列表顶部，因此它不会成为DOM中的新元素，它将是具有新用户名称的相同元素。新元素将具有键1（并将使用已存在用户的数据创建）等等..."
"这就是为什么不建议使用数组的索引作为键的好方法。"
"因此，如果您希望在数组前面添加每个新元素时播放动画，您必须使用唯一的键来标识用户（例如，其ID是最佳选择，或其名称）。在您的情况下，用户似乎只是一个string，所以也许您可以像这样使用它："
userList.map((user: any) => {
return (
<div key={user} className='user'>{user}</div>
)
})
"希望这清楚了 :)"
英文:
What is happening is that the key prop remain the same in the first element of the list, so React will update the elements containing the existing keys and will create a new one at the end of the list with a new key.
At first you have an element with the key 0 that is new, so the animation will play. Then, you add an element in your user list, but in the DOM the element with the key 0 will remain at the top of the list, so it won't be a new element to the DOM, it will be the same element updated with the name of the new user. The new element will be the one with the key 1 (and will be create with the data of the already existing user) etc...
That is why it is not a good idea to use the indexes of an array as keys.
So if you want your animation to be played for every new element prepended to the array, you must use a unique key that identify the user (its id for example, it is the best option, or its name). In you case, the user seems to only be a string, so maybe you should just use it like this :
userList.map((user: any) => {
return (
<div key={user} className='user'>{user}</div>
)
})
Hope it's clear 
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论