实现CSS过渡动画

实现文字显示隐藏

App.jsApp.css

import React, { Component, Fragment } from "react";
import './App.css'

class App extends Component {

    constructor (props) {
        super(props)
        this.state = {
            isShow: true
        }
        this.handleClickToggle = this.handleClickToggle.bind(this)
    }

    render () {
        return (
            <Fragment>
                <div className={this.state.isShow ? "show": "hide"}>你好</div>
                <button onClick={this.handleClickToggle}>隐藏/显示</button>
            </Fragment>
        )
    }

    handleClickToggle () {
        this.setState({
            isShow: this.state.isShow ? false: true
        });
    }
}

export default App;

.show {
    opacity: 1;
    transition: all 1s ease-in;
}

.hide {
    opacity: 0;
    transition: all 1s ease-in;
}