在React 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