我想为列表项设置动画。每个列表项都是样式化组件。当我在列表项上应用动画时,我希望在每个列表项上都有动画,逐个应用。相反,动画一次应用于所有列表项。
const listAnimate = keyframes`
from{
opacity: 0;
}
to{
opacity: 1;
}
`;
const Card = ({key,className,children}) => (
<li key={key} className={className}>
{children}
</li>
)
const StyledCard = styled(Card)`
margin-top: 1rem;
box-shadow: -3px 6px 43px -12px rgba(0,0,0,0.49);
padding: 1rem;
animation: ${listAnimate} 1.5s ease-in 1s alternate;
background-color: rgba(242,246,248,1);
`;
const IndexPage = ({data}) => {
const nodes = data.allMarkdownRemark.edges
return (
<div>
<ul style={{listStyle: 'none', marginLeft: '0'}}>
{nodes.map(({node},i) =>
<StyledCard key={i}>
<Link to={node.fields.slug} style={{ textDecoration: 'none' }}>
<Header>{node.frontmatter.title}</Header>
<Paragraph>{node.excerpt}</Paragraph>
</Link>
</StyledCard>
)}
</ul>
</div>
)
}
StyledCard
组件应逐一显示,动画为opacity
0
至1
。