How can I make sure that every time a new user is prepended, the first div has a CSS animation? Currently, my code only works for the first prepend and the animation does not trigger on subsequent ones.
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)
}
}