本文实例讲述了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 (



大BOSS--孙悟空






);

}


toTogger() {

this.setState({

isShow:this.state.isShow?false:true

})

}
}

export default Boss;


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 (



大BOSS--孙悟空






);

}


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;}


.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;

}
}


.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 (




in={this.state.isShow}

timeout={2000}

classNames="boss-text"

unmountOnExit

>

{/*
大BOSS--孙悟空
*/}

大BOSS--孙悟空








);

}


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


render() {

return (




in={this.state.isShow}

timeout={2000}

classNames="boss-text"

unmountOnExit

>

{/*
大BOSS--孙悟空
*/}

大BOSS--孙悟空








);

}


.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;}


.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 (





{this.input=input}} value={this.state.inputValue} onChange={this.change.bind(this)}/>









    {

    this.state.list.map((v,i)=>{

    return(


    timeout={2000}

    classNames='boss-text'

    unmountOnExit

    key={i}

    >





    );

    })

    }









);

}
}

export default Test;


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 (





{this.input=input}} value={this.state.inputValue} onChange={this.change.bind(this)}/>









    {

    this.state.list.map((v,i)=>{

    return(


    timeout={2000}

    classNames='boss-text'

    unmountOnExit

    key={i}

    >





    );

    })

    }









);

}
}

export default Test;

希望本文所述对大家react程序设计有所帮助。