React Transition Group (reactcommunity.org)

安装

# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

Components取自官方示例

• Transition
• CSSTransition
• SwitchTransition
• TransitionGroup

CSSTransition

使用方式

import React, { PureComponent } from 'react'
import { CSSTransition } from 'react-transition-group';
import "./App.css"

export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      show: true
    }
  }
  render() {
    const { show } = this.state
    return (
      <>

        <button onClick={e => this.setState({ show: !show })}>点击切换</button>
        {/* {show && <h1>测试显示隐藏 </h1>} */}
        {/* unmountOnExit 卸载DOM */}
        {/* 注意下文css这里对照 classNames设置前缀不同  */}
        <CSSTransition in={show} unmountOnExit={true} timeout={1200} classNames="ceshi" appear> 
          <h1>测试内容和</h1>
        </CSSTransition>
      </>
    )
  }
}

export default App

App.css

.ceshi-appear{
  opacity: 0;
  transform: rotateX(0);
}
.ceshi-appear-active{
  transform:rotateX(360deg);
  opacity: 1;
  transition: all 1.2s;
}
.ceshi-enter {
  opacity: 0;
}
.ceshi-enter-active {
  opacity: 1;
  transition: opacity 1200ms;
}
.ceshi-exit {
  opacity: 1;
}
.ceshi-exit-active {
  opacity: 0;
  transition: opacity 1200ms;
}

更多使用示例可以参考网站学习