Slide in animation in react js

Question

I have a list of to-do task. I want to display one task per screen and when the user clicks the next button he should be able to see the next. I want to achieve it with slide animation. I came across react-transition-group package which can be used to for animation. But the slide animation is not working properly.

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

Finally, I manage to achieve it. Earlier I was using float to keep all the elements in one line. I change it with position absolute.

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