React实现CSS过渡动画

1.简单的过渡动画效果

import React,{Component,Fragment} from 'react';
import './App.css';
class App extends Component{
  constructor(){
    super()
    this.state={
      show:true
    }
    this.handleClick = this.handleClick.bind(this);
  }

  render(){
    return(
      <Fragment>
        <div className = {this.state.show ? 'show':'hide'}><h1>Hello</h1></div>
        <button onClick={this.handleClick}>toggle</button>
      </Fragment>
    )
  }
  handleClick = ()=>{
    this.setState({
        show:this.state.show?false:true
    }) 
   }
}
export default App;

2.使用react-transition-group实现动画

（1）先安装

npm install react-transition-group --save

（2）引入文件

import { CSSTransition} from 'react-transition-group';