在反应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

在反应js中滑动动画

Slide in animation in react js

html

css

reactjs

react-transition-group