react-transition-group

**

1、 CSSTransition实现单一组件动画

**
CSSTransition单独使用时，有两个比较重要的属性。in和classNames。
classNames属性： CSSTransition子组件动态类选择器名前缀。
in属性：

• 当in为true时，CSSTransition的子组件会先添加$classNames-enter类，下一个tick会添加${classNames}-enter-active类。
• 当in为false时，CSSTransition的子组件会先添加$classNames-exit类，下一个tick会添加${classNames}-exit-active类。

小DEMO

export default class DemoApp2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            number: 0
        };
        this.handleSwitch = this.handleSwitch.bind(this);
    }
    handleSwitch(event) {
        this.setState({
            number: this.state.number === 0?1:0
        });
    }
    render() {
        return (
            <div className='app2-container'>
                <TransitionGroup>
                    <CSSTransition
                        key={this.state.number}
                        timeout={500}
                        classNames='app2'
                        unmountOnExit={true}
                    >
                        <div className='app2-square'>{this.state.number}</div>
                    </CSSTransition>
                </TransitionGroup>
                <button className='app2-btn' onClick={this.handleSwitch}>切换</button>
            </div>
        );
    }
}

.app1-enter {
    /*初始透明度为0*/
    opacity: 0;
    /*初始偏移量为100%*/
    transform: translateX(100%);
}

.app1-enter-active {
    /*随后透明度为1*/
    opacity: 1;
    /*随后偏移量回归原位*/
    transform: translateX(0);
    /*这个移动过程我们做个动画，动画持续时长500毫秒*/
    transition: all 500ms ease;
}

.app1-exit {
    opacity: 1;
    transform: translateX(0);
}

.app1-exit-active {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 500ms ease;
}

效果显示