（十四）React 的 CSS 过渡动画

1. CSS3 实现渐隐渐现

   
   image.png

实现代码

App.js

import React, { Component, Fragment } from 'react';
import './style.css'
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: true
        }
        this.handleToggole = this.handleToggole.bind(this)
    }
    render() {
        return (
            <Fragment>
                <div className={this.state.show ? 'show' : 'hide'}>
                    hello
                </div>
                <button onClick={this.handleToggole}>toggle</button>
            </Fragment>

        )
    }
    handleToggole() {
        this.setState({
            show: this.state.show ? false : true
        })
    }
}
export default App

style.css

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

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'


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