Как сделать задержку для каждого элемента в TransitionGroup React?

Question

[Incold]

Пытаюсь сделать анимацию с помощью ReactTransitionGroup, хочу добиться эффекта, чтобы элементы появлялись (всплывали) друг за другом,а получается, что они появляются все вместе

function Menu(props) {
  useEffect(() => {
    props.getMenuList()
  }, [props.getMenuList])

  return (
    <div className="row container-fluid mx-0" id="menu">
      <TransitionGroup component={null}>
        {
          props.menu.map(pizza =>
            <CSSTransition
              key={pizza._id}
              timeout={300}
              classNames="menuItem">
              <Pizza pizzaData={pizza}/>
            </CSSTransition>
          )
        }
      </TransitionGroup>
    </div>
  )
}

Pizza.js:

<div className="col-3 mt-3">
    <div className="container-fluid pizza p-0">
     ...
    </div>
 </div>

CSS:

.menuItem-enter, .menuItem-appear {
    opacity: 0;
    transform: translateY(30%);
 }
.menuItem-enter-active, .menuItem-appear-active {
   opacity: 1;
   transform: translateY(0%);
   transition: opacity 300ms, transform 300ms;
}

Также пробовал вручную задать разную задержку для каждого элемента, но это не помогло. Как добиться желаемого эффекта?

Answer 1

[hzzzzl]

что такое timeout, задержка перед анимацией?

props.menu.map(pizza =>
            <CSSTransition
              key={pizza._id}
              timeout={300}   // это задержка?

props.menu.map((pizza, index) =>
            <CSSTransition
              key={pizza._id}
              timeout={300 * index}   // тогда можно попробовать так

Comments

[Incold]

timeout - это длительность анимации, подробнее о reactTransitionGroup: https://reactcommunity.org/react-transition-group/...