react中动画的实现

准备一个显示隐藏的框架

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

class TodoList extends Component {
   
    //constructor中设置state的数据结构
    constructor(props) {
   
        super(props);
        this.state = {
   
            show : 'true'
        }
        this.handleClick = this.handleClick.bind(this)
    }
    render() {
   
        return (
            <Fragment>
               <div className={
   this.state.show ? 'show' : 'hide'}>123</div>
                <button onClick={
   this.handleClick}>toggle</button>
            </Fragment>
        )
    }
    handleClick(){
   
        this.setState({
   
            show: this.state.show ? false : true
        })