Question

所以我有一个用gatsbyjs创建的博客。我想使用react-spring用一些动画来渲染帖子，这些动画是顺序而不是同时应用于所有帖子的。我想做的是在所有帖子上map，并在一段时间延迟后返回该帖子。现在这不能按预期工作。这是代码的相关部分：

  <ul style={{ listStyle: "none", marginLeft: "0" }}>
    <Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
      {styles =>
        nodes.map(({ node }, i) =>
          setTimeout(
            () => (
              <StyledCard style={styles} key={i}>
                <Link to={node.fields.slug}>
                  <Header>{node.frontmatter.title}</Header>
                  <Paragraph>{node.excerpt}</Paragraph>
                </Link>
              </StyledCard>
            ),
            1000
          )
        )
      }
    </Spring>
  </ul>

Answer 1

您可以为此使用Trail：https://github.com/drcmda/react-spring/blob/master/API-OVERVIEW.md#trailsstaggered-transitions

或者，延迟弹簧：https://github.com/drcmda/react-spring/issues/97#issuecomment-392380139

使用react-spring顺序呈现帖子列表

1 个答案: