21-React中使用react-transition-group

npm install react-transition-group --save

yarn add react-transition-group

一 CSSTransition

 

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-11-02 21:53:04
 * @LastEditTime: 2022-11-03 00:18:22
 */
import React, { PureComponent } from 'react'
import { CSSTransition } from 'react-transition-group'
import './CSSTransition.css'

import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { Avatar, Card } from 'antd';
const { Meta } = Card;

const App = () => (
  <Card
    style={{
      width: 300,
    }}
    cover={
      <img
        alt="example"
        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
      />
    }
    actions={[
      <SettingOutlined key="setting" />,
      <EditOutlined key="edit" />,
      <EllipsisOutlined key="ellipsis" />,
    ]}
  >
    <Meta
      avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
      title="Card title"
      description="This is the description"
    />
  </Card>
);
export default class CSSTransitionDemo extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      isShow: true
    }
  }
  render() {
    const { isShow } = this.state
    return (
      <div>
        <button onClick={ e => { this.setState({ isShow: !isShow  }) } }>显示/隐藏</button>
        <CSSTransition in={ isShow }
                      classNames="card"
                      timeout={300}
                      unmountOnExit={true}
                      appear
                      onEnter={ el => console.log("开始进入") }
                      onEntering={ el => console.log("正在进入")}
                      onEntered={ el => console.log("进入完成")}
                      onExit={ el => console.log("开始退出") }
                      onExiting={ el => console.log("退出状态") }
                      onExited={ el => console.log("退出完成") } >
          <App />
        </CSSTransition>
      </div>
    )
  }
}


.card-enter, .card-appear {
  opacity: 0;
  transform: scale(0.6);
}

.card-enter-active, .card-appear-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}

.card-enter-done, .card-appear-done {
  opacity: 1;
}

.card-exit {
  opacity: 1;
  transform: scale(1);
}

.card-exit-active {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 300ms, transform 300ms;
}

.card-exit-done {
  opacity: 0;
}

二 SwitchTransition

 

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-11-02 21:53:04
 * @LastEditTime: 2022-11-03 00:20:16
 */
import React, { PureComponent } from 'react';
import { CSSTransition, SwitchTransition } from 'react-transition-group';

import './SwitchTransition.css'

class SwitchTransitionDemo extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      isOn: true
    }
  }

  render() {
    const { isOn } = this.state
    return (
      <div>
        <SwitchTransition mode="in-out">
          <CSSTransition key={ isOn ? "on" : "off" }
                        classNames="btn"
                        timeout={300}>
            <button onClick={ e => this.setState({ isOn: !isOn }) }>{ isOn ? "on" : "off" }</button>
          </CSSTransition>
        </SwitchTransition>
      </div>
    );
  }
}

export default SwitchTransitionDemo;


.btn-enter {
  opacity: 0;
  transform: translateX(100%);
}

.btn-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms;
}

.btn-exit {
  opacity: 1;
  transform: translateX(0);
}

.btn-exit-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 300ms, transform 300ms;
}

 三 TransitionGroup

 

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-11-02 21:53:04
 * @LastEditTime: 2022-11-02 23:53:21
 */
import React, { PureComponent } from 'react'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import './TransitionGroup.css'

export default class TransitionGroupDemo extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      names: ["tom", 'nacy', 'yummy']
    }
  }
  render() {
    return (
      <TransitionGroup>
        {
          this.state.names.map((item, index) => {
            return (
              <CSSTransition key={index}
                             timeout={500}
                             classNames="item">
                <div>{ item }</div>
              </CSSTransition>
            )
          })
        }
        <button onClick={ e => this.addName() }>+name</button>
      </TransitionGroup>
    )
  }

  addName() {
    this.setState({
      names: [...this.state.names, "测试新增数据"]
    })
  }
}


.item-enter {
  opacity: 0;
  transform: scale(0.6);
}

.item-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}

.item-enter-done {
  color: red
}

.item-exit {
  opacity: 1;
  transform: scale(1);
}

.item-exit-active {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 300ms, transform 300ms;
}

.item-exit-done {
  opacity: 0;
}