Как визуализировать каждый элемент из массива с задержкой, используя CSSTransition? - PullRequest
Новая
       6

Как визуализировать каждый элемент из массива с задержкой, используя CSSTransition?

0 голосов
/ 01 июля 2018

У меня есть массив элементов, и когда элементы появляются в DOM, я хочу визуализировать каждый элемент с задержкой. На данный момент все элементы отображаются одновременно. Вот мой код: 

  <TransitionGroup className="portfolioItems" component={Container}>
    {portfolio &&
      portfolioItems.map(({ id, url }) => (
        <CSSTransition classNames="portfolioItems" timeout={5000} key={id}>
          <Segment rised style={{ padding: 0, margin: 25 }}>
            <Image src={url} rounded />
          </Segment>
        </CSSTransition>
      ))}
  </TransitionGroup>

Есть ли способ достичь этого? Вот мой текущий css: 

.portfolioItems-enter {
  opacity: 0;
  transform: translateY(50%) scale(0.7, 0.7);
}
.portfolioItems-enter-active {
  opacity: 1;
  transform: translateY(0%) scale(1, 1);
  transition: 3s all ease-in-out
}
...