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

标签： htmlcssreactjsreact-transition-group

Answer 1

最后，我设法实现了它。早些时候，我使用 float 将所有元素保持在一行中。我用 position 改变它absolute。

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