react中使用css动画效果

index.js

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

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

App.js

import React,{Component,Fragment} from 'react';
import './style.css';
class App extends Component{

    constructor(props){
        super(props);
        this.state={
            show:true
        }
        this.handleToggle=this.handleToggle.bind(this);
    }
    render() {
        return (
            <Fragment>
                <div className={this.state.show?'show':'hide'}>hello</div>
                <button onClick={this.handleToggle}>toggle</button>
            </Fragment>
        )
    }
    handleToggle(){
        this.setState({
            show:this.state.show ? false : true
        })
    }
}
export default App;

style.css

/* css的过渡动画效果 */
/* .show{
    opacity: 1;
    transition: all 1s ease-in;
}
.hide{
    opacity: 0;
    transition: all 1s ease-in;
} */

/* forwards可以在动画结束之后，保存动画的最后一帧css样式 */
.hide{
    animation: hide-item 2s ease-in forwards;
}
.show{
    animation: show-item 2s ease-in forwards;
}
@keyframes show-item{
    0% {
        opacity: 1;
        color: red;
    }
    50%{
        opacity: 0.5;
        color: green;
    }
    100% {
        opacity: 1;
        color: blue;
    }
}
@keyframes hide-item{
    0% {
        opacity: 1;
        color: red;
    }
    50%{
        opacity: 0.5;
        color: green;
    }
    100% {
        opacity: 0;
        color: blue;
    }
}