在网页中实现动画有两种方式：CCS3的方式 和 脚本的方式。然而在React中提供了一个叫做ReactCSSTransitionGroup的功能帮助实现动画, 为了使用这个功能需要安装react-addons-css-transition-group 这个库来实现CCS3的动画。

1.安装react-addons-css-transition-group

在控制台进入项目的根目录执行：

yarn add react-addons-css-transition-group
// or
npn install react-addons-css-transition-group

2.新建一个Main.js组件

这个组件作为应用的首页

import React, {Component} from 'react';

export default class Main extends Component {

    constructor(props) {
        super(props);
        /*给下面两个函数绑定this的上下文*/
        this.OnClickAdd = this.OnClickAdd.bind(this);
        this.OnClickRemove = this.OnClickRemove.bind(this);
    }

    render() {
        return (
            <div style={styles.content}>
                {/*Object.assign() 将其它对象可枚举的属性拷贝到目标对象{}  */}
                <div style={ Object.assign({}, styles.divStyle) }>
                    默认
                </div>
                <button onClick={ this.OnClickAdd }>add</button>
                <button onClick={ this.OnClickRemove }>remove</button>
            </div>
        )
    }
    /*添加div*/
    OnClickAdd() {

    }
    /*删除div*/
    OnClickRemove() {

    }
}
/*样式*/
const styles = {
    content: {
        width: '400px',
        height: '500px',
        backgroundColor: 'skyblue',
        margin: '0 auto',
    },
    divStyle: {
        width: '100px',
        height: '50px',
        backgroundColor: 'green',
        margin: '3px 0',
        visibility: 'visible'
    },
}

执行的效果：

3.给默认的div添加动画

1.从react-addons-css-transition-group导入TransitionGroup组件

2.TransitionGroup组件包裹要进行动画的标签

3.导入动画样式main.css

4.TransitionGroup组件的属性：

1. transitionName: 指定动画的类名;
2. transitionAppear={true} : 让随着TransitionGroup实例一起装载的子组件也有动画
3. transitionAppearTimeout : 指定多久删除动画类 ( 即 动画的时间，一般与css3中指定的时间保持一样 )

import React, {Component} from 'react';
/*引入动画*/
import TransitionGroup from 'react-addons-css-transition-group';
/*导入动画样式*/
import './css/main.css';

export default class Main extends Component {

    constructor(props) {
        super(props);
        /*给下面两个函数绑定this的上下文*/
        this.OnClickAdd = this.OnClickAdd.bind(this);
        this.OnClickRemove = this.OnClickRemove.bind(this);
    }

    render() {
        return (
            <div style={styles.content}>
                <TransitionGroup
                    transitionName="show"

                    transitionAppear={true}
                    transitionAppearTimeout={2000}
                >
                    {/*Object.assign() 将其它对象可枚举的属性拷贝到目标对象{}  */}
                    <div style={ Object.assign({}, styles.divStyle) }>
                        默认
                    </div>

                </TransitionGroup>
                <button onClick={ this.OnClickAdd }>add</button>
                <button onClick={ this.OnClickRemove }>remove</button>
            </div>
        )
    }
    /*添加div*/
    OnClickAdd() {

    }
    /*删除div*/
    OnClickRemove() {

    }
}
/*样式*/
const styles = {
    content: {
        width: '400px',
        height: '500px',
        backgroundColor: 'skyblue',
        margin: '0 auto',
    },
    divStyle: {
        width: '100px',
        height: '50px',
        backgroundColor: 'green',
        margin: '3px 0',
        visibility: 'visible'
    },
}

main.css中的样式：

1 .show 对应着transitionName中的值 show

2 . xxx-appear :代表首次装载 ； xxx-appear-active 代表首次装载完成

3.其中-appear 和 -appear-active 是固定的写法

/*首次装载过程*/
.show-appear{
    opacity: 0;
    transform: translateX(-200px);
}
.show-appear-active{
    transition: all 2s linear;  /*  这里的2s 与 transitionAppearTimeout 指定的最好一样  */
    transform: translateX(0px);
    opacity: 1;
}

一刷新执行的效果:

4.点击添加和删除一个div

1.在state中定义一个items 数组

2.在TransitionGroup组件中调用this.renderItems()渲染多个items

3.处理add 和 remove的点击添加和删除div , 并调用setState刷新界面

4.TransitionGroup组件属性：

1. transitionEnterTimeout={2000} 代表在TransitionGroup里面新添加组件进入的动画时间
2. transitionLeaveTimeout={2000} 代表在TransitionGroup里面删除组件离开时的动画时间

注意：

transitionEnterTimeout 与 transitionLeaveTimeout 设置的时间最好和css3中设置的一样，因为

transitionEnterTimeout 与 transitionLeaveTimeout 设置的时间其原理是指定什么时候删除动画类

import React, {Component} from 'react';
/*引入动画*/
import TransitionGroup from 'react-addons-css-transition-group';
import './css/main.css';
export default class Main extends Component {

    constructor(props) {
        super(props);
        this.state = {
            items: [1],
        }
        /*给下面两个函数绑定this的上下文*/
        this.OnClickAdd = this.OnClickAdd.bind(this);
        this.OnClickRemove = this.OnClickRemove.bind(this);

    }

    render() {
        return (
            <div style={styles.content}>
                <TransitionGroup
                    transitionName="show"
                    transitionEnterTimeout={2000}
                    transitionLeaveTimeout={2000}

                    transitionAppear={true}
                    transitionAppearTimeout={2000}
                >
                    {/*Object.assign() 将其它对象可枚举的属性拷贝到目标对象{}  */}
                    <div style={ Object.assign({}, styles.divStyle) }>
                        默认
                    </div>
                     {/* 渲染多个items */}
                    {this.renderItems()}
                </TransitionGroup>
                <button onClick={ this.OnClickAdd }>add</button>
                <button onClick={ this.OnClickRemove }>remove</button>
            </div>
        )
    }
    /* 渲染多个items */
    renderItems() {
        /* 定义一个组件数组Items： 将items数组映射为Items组件数组 */
        const Items = this.state.items.map((item, i) => (
            <div key={i} style={ Object.assign({}, styles.divStyle) }>
                {item}
            </div>
        ));
        return Items;
    }

    /*添加div*/
    OnClickAdd() {
        /*给state中的items添加数据*/
        this.state.items.push(10);
        /*刷新界面*/
        this.setState({
            items:this.state.items,
        })
    }
    /*删除div*/
    OnClickRemove() {
        this.state.items.pop();
        this.setState({
            items:this.state.items,
        })
    }
}
/*样式*/
const styles = {
    ....
}

main.css添加样式：

1.show 是在 transitionName 中指定的

2 xx-enter xxx-enter-active xx-leave xx-leave-acitve 是固定的写法

/*装载动画*/
.show-enter{
  opacity: 0;
  transform: translateX(-200px);
}
/*装载完成动画*/
.show-enter.show-enter-active{
    transition: all 2s linear;
    transform: translateX(0px);
    opacity: 1;
}


/*御载动画*/
.show-leave{
    transform: translateX(0px);
    opacity: 1;
}
/*御载完成动画*/
.show-leave.show-leave-active{
    transition: all 2s linear;
    transform: translateX(200px);
    opacity: 0;
}

点击删除执行的动画效果：

5.在React中使用Animate.css动画

1.引入animate.css动画库 ： https://daneden.github.io/animate.css/

2.修改transitionName写法( 把以前的字符串改成对象 )

 transitionName={{
         enter:'shake',    //使用animate中的shake动画
         leave: 'bounceIn',  //使用animate中的bounce动画
    }}

3.transitionEnterTimeout设置为 1000毫秒( 因为animate库中动画默认是1秒 )

4.transitionLeaveTimeout设置为 750毫秒 ( 因为animate库中bounceIn动画是0.75s )

5 .给renderItems()函数中的div添加className属性 , 并赋值为animated

import React, {Component} from 'react';
    /*引入动画*/
    import TransitionGroup from 'react-addons-css-transition-group';
    /*引入animate.css动画*/
    import './css/animate.css';
    export default class Main extends Component {

        constructor(props) {
            super(props);
            this.state = {
                items: [1],
            }
            /*给下面两个函数绑定this的上下文*/
            this.OnClickAdd = this.OnClickAdd.bind(this);
            this.OnClickRemove = this.OnClickRemove.bind(this);
        }

        render() {
            return (
                <div style={styles.content}>
                    <TransitionGroup
                        transitionName={{
                            enter:'shake',
                            leave: 'bounceIn',
                        }}
                        transitionEnterTimeout={1000}
                        transitionLeaveTimeout={750}
                    >
                        {/*Object.assign() 将其它对象可枚举的属性拷贝到目标对象{}  */}
                        <div style={ Object.assign({}, styles.divStyle) }>
                            默认
                        </div>
                        {this.renderItems()}
                    </TransitionGroup>
                    <button onClick={ this.OnClickAdd }>add</button>
                    <button onClick={ this.OnClickRemove }>remove</button>
                </div>
            )
        }
        renderItems() {
            const Items = this.state.items.map((item, i) => (
                <div className="animated" key={i} style={ Object.assign({}, styles.divStyle) }>
                    {item}
                </div>
            ));
            return Items;
        }
        /*添加div*/
        OnClickAdd() {
            this.state.items.push(10);
            this.setState({
                items:this.state.items,
            })
        }
        /*删除div*/
        OnClickRemove() {
            this.state.items.pop();
            this.setState({
                items:this.state.items,
            })
        }
    }
    /*样式*/
    const styles = {
        ...
    }