React中使用CSS动画效果

什么叫CSS动画效果呢？

通过@keyframes定义一系列动画

show-item动画名称，2s动画过渡时间，ease-in 过渡速率，forwards（可选）用于保留动画最后一侦（100%，to），默认不会保留最后一侦

index.css

.show{
    animation: show-item 2s ease-in forwards; 
}

.hide{
    animation: hide-item 2s ease-in forwards; 
}

@keyframes hide-item{
    0%{
        opacity: 1;
        color: red;
    }

    50%{
        opacity: 0.5;
        color: green;
    }

    100%{
        opacity: 0;
        color: blue;
    }
}

@keyframes show-item{
    0%{
        opacity: 0;
        color: red;
    }

    50%{
        opacity: 0.5;
        color: green;
    }

    100%{
        opacity: 1;
        color: blue;
    }
}

app.js

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

class App extends Component{
    constructor(props){
        super(props)
        this.state={
            show:true
        }
        this.handleToggle = this.handleToggle.bind(this)
    }
    render(){
        return (
            <Fragment>
                 <div class={this.state.show?'show':'hide'}>hello world</div>
                 <button onClick={this.handleToggle}>toggle</button>
            </Fragment>
        )
    }

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

export default App;

以上只能做一些简单的动画