React css动画

Css动画不过多的去解释，拿 transition 做一个例子 如不太了解请百度css3

直接上代码

新建组件 App.js

import React, { Component, Fragment } from 'react'

class App extends Component{
  constructor(props){
    super(props)
    this.state = ({
      show: true
    })
    this.toggle = this.toggle.bind(this)
  }
  render() {
    return (
      <Fragment>
        {/* 
           * className = class
           * {this.state.show ? 'show' : 'hide'} 三元表达式，不了解查看ES6
           */}
        <div className={this.state.show ? 'show' : 'hide'}>hello</div>
        <button onClick={this.toggle}>toggle</button>
      </Fragment>
    )
  }

  toggle(){
    this.setState(() => ({
      show: !this.state.show
    }))
  }
}

export default App

React 入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';  //过度动画让我统一写在了一个css中，具体可以按项目细分

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);