Css 如何瞄准元素'；动态和淡入式组件的第n个子级？

试图在

li

元素上动态添加一个转换我遇到了一个问题，就是让它在每个

li

元素上淡入，而不是同时在所有

li

元素上淡入。在我的研究中，我确实发现，我的尝试就是基于此

在我的组件中，我通过

菜单

并使用以下内容渲染它：

{menu.map（（项，键）=>{
返回(
{item.name}
)
})}

因为我添加了一个键，所以我也尝试拉那个道具，我将我的样式化组件写为：

const NavItem=styled.li`
宽度：100%；
显示器：flex；
不透明度：${props=>（props.visible？`1`:`0`）}；
${props=>itemTrans（props.key+1）}；
`

在我的函数

itemTrans

中，我尝试了：

const itemTrans=iter=>{
让样式=``
样式=`&:n子项（${iter}）{
过渡：所有0.2秒易用${iter*0.2}；
}`
返回css`
${style}
`
}

我的目标是延迟地一个接一个地转换每个

li

元素。我读过的进一步研究：

---

编辑：

在测试中，我无法访问

键

道具，因此我添加了

iter

并传递了：

{menu.map（（项，键）=>{
返回(
{item.name}
)
})}

NavItem：

const NavItem=styled.li`
宽度：100%；
显示器：flex；
不透明度：${props=>（props.visible？`1`:`0`）}；
${props=>itemTrans（props.iter+1）}；
`

在样式化组件中，如何动态地将列表元素的

：n个子元素
作为目标，并逐个淡入，而不是一次全部淡入