Вставьте анимацию в ответ JS

Question

У меня есть список задач.Я хочу отображать одну задачу на экран, и когда пользователь нажимает следующую кнопку, он должен видеть следующую.Я хочу добиться этого с помощью слайд-анимации.Я наткнулся на пакет react-transition-group, который можно использовать для анимации.Но анимация слайдов не работает должным образом.

https://codesandbox.io/s/transitiongroup-component-zjzep

<CSSTransition
  in={currentPage === 1}
  key={1}
  timeout={500}
  classNames="item"
>
  <ListGroup.Item>
    <Button
      className="remove-btn"
      variant="danger"
      size="sm"
      onClick={() => {}}
    >
       &times;
     </Button>
              {'a'}
     </ListGroup.Item>
  </CSSTransition>
  <CSSTransition
    in={currentPage === 2}
    key={2}
    timeout={500}
    classNames="item"
   >
     <ListGroup.Item>
        <Button
          className="remove-btn"
          variant="danger"
          size="sm"
          onClick={() => {}}
        >
         &times;
       </Button>
       {'b'}
       </ListGroup.Item>
 </CSSTransition>

Answer 1

Наконец-то мне удается этого добиться.Ранее я использовал float, чтобы сохранить все элементы в одной строке.Я изменяю это с позицией absolute.

https://codesandbox.io/s/transitiongroup-component-zjzep