@排面 react 动画列表的进出场蚂蚁金服 rc-queue-anim 动画库

最新推荐文章于 2024-08-25 09:26:15 发布

泡泡大魔王

最新推荐文章于 2024-08-25 09:26:15 发布

阅读量4.2k

点赞数

本文链接：https://blog.csdn.net/weixin_45271385/article/details/103056150

版权

1 `yarn rc-queue-anim -S`

2 index.js=>

import React from 'react';
import ReactDom from 'react-dom';
import QueueAnim from 'rc-queue-anim';
class App extends React.Component {
  state = {
    show: false
  }
  show = () => {
    this.setState({
      show: !this.state.show
    })
  }
  render() {
    return (
      <div>
        <QueueAnim delay={300}>
          {this.state.show ? [
            <div key="a">Queue Demo</div>,
            <div key="b">Queue Demo</div>,
            <div key="c">Queue Demo</div>,
            <div key="d">Queue Demo</div>] : null
          }
        </QueueAnim>
        <input type="button" value="啪啪" onClick={this.show} />
      </div>
    )
  }
}
ReactDom.render(
  <App />,
  document.querySelector("#root")
);