react--使用CSS实现react动画

 react动画：

import React, { Component } from 'react';

class Boss extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isShow:true
        }
        this.toTogger=this.toTogger.bind(this)
    }
    render() { 
        return ( 
            <div>
                <div className={this.state.isShow?'show':'hide'}>大BOSS--孙悟空</div>
                <div><button onClick={this.toTogger}>召唤</button></div>
            </div>
        );
    }

    toTogger() {
        this.setState({
            isShow:this.state.isShow?false:true
        })
    }
}
 
export default Boss;

css:

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

keyframes动画：

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

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

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

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

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

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

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

react-transition-group动画库：

import {CSSTransition} from 'react-transition-group';    


render() { 
        return ( 
            <div>
                <CSSTransition
                    in={this.state.isShow}
                    timeout={2000}
                    classNames="boss-text"
                    unmountOnExit
                >
                {/* <div className={this.state.isShow?'show':'hide'}>大BOSS--孙悟空</div> */}
                <div>大BOSS--孙悟空</div>
                </CSSTransition>
        <div><button onClick={this.toTogger}>{this.state.btn}</button></div>
            </div>
        );
    }

.boss-text-enter{opacity: 0;}
.boss-text-enter-active{opacity: 1;transition: opacity 2000ms;}
.boss-text-enter-done{opacity: 1;}

.boss-text-exit{opacity: 1;}
.boss-text-exit-active{opacity: 0;transition: opacity 2000ms;}
.boss-text-exit-done{opacity: 0;}

多DOM动画：

import React, { Component, Fragment } from 'react';
import List from './List.js';
import axios from 'axios';
import Boss from './Boss';
import {CSSTransition,TransitionGroup} from 'react-transition-group'

class Test extends Component {
    constructor(props) {
        super(props);
        this.state={
            inputValue:'aaa',
            list:[],
        }
        // this.add=this.add.bind(this);
    }

    addList() {
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })
    }

    change(e) {
        this.setState({
            // inputValue:e.target.value
            inputValue:this.input.value
        })
    }

    delete(i) {
        // console.log(i);
        const list = this.state.list;
        list.splice(i,1);
        this.setState({
            list:list
        })
    }


    componentDidMount() {
        // console.log('componentDidMount');
        axios.get('https://www.easy-mock.com/mock/5e1d3d1564a3c20d7f366f91/ReactDemo1/App')
        .then((res)=>{
            console.log('获取数据'+JSON.stringify(res));
            this.setState({
                list:res.data.data
            });
        })
        .catch((error)=>{console.log('获取数据失败'+error)});
    }


    render() { 
        console.log('3-render');
        return (
            <Fragment>
            <div>
                <input ref={(input)=>{this.input=input}} value={this.state.inputValue} onChange={this.change.bind(this)}/>
                <button onClick={this.addList.bind(this)}>添加</button>
            </div>
            <ul>
                <TransitionGroup>
                    {
                        this.state.list.map((v,i)=>{
                            return(
                                <CSSTransition
                                    timeout={2000}
                                    classNames='boss-text'
                                    unmountOnExit
                                    key={i}
                                >
                                    <List key={i} content={v} index={i} delete={this.delete.bind(this)} />
                                </CSSTransition>
                            );
                        })
                    }
                </TransitionGroup>
            </ul>
            <Boss/>
            </Fragment>
        );
    }
}
 
export default Test;