Использование Reaction-Spring для последовательной визуализации списка сообщений.

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