React-组件-TransitionGroup

TransitionGroup 的作用，博主用通俗易懂的话来讲就是一个一组元素添加动画，在我们的实际开发当中有时可能会有这么一个需求就是，在一个页面上，有添加和删除，在做这些操作的时候需要都带上动画，那么这个时候就可以使用 TransitionGroup 来快速实现。

案例

App.js:

import React from 'react';
import './App.css'
import {CSSTransition, TransitionGroup} from 'react-transition-group';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            heroList: [
                {id: 1, name: '鲁班'},
                {id: 2, name: '虞姬'},
                {id: 3, name: '黄忠'},
            ]
        }
    }

    render() {
        return (
            <div>
                <ul>
                    <TransitionGroup>
                        {
                            this.state.heroList.map((obj, index) => {
                                return (
                                    <CSSTransition key={obj.id}
                                                   timeout={3000}
                                                   classNames={'item'}
                                    >
                                        <li
                                            onClick={() => {
                                                this.removeHero(index)
                                            }}
                                        >
                                            {obj.name}
                                        </li>
                                    </CSSTransition>
                                )
                            })
                        }
                    </TransitionGroup>
                </ul>
                <button
                    onClick={() => {
                        this.btnClick()
                    }}
                >
                    新增
                </button>
            </div>
        );
    }

    btnClick() {
        this.setState({
            heroList: [...this.state.heroList, {id: this.state.heroList.length + 1, name: '阿珂'}]
        })
    }

    removeHero(index) {
        const list = this.state.heroList.filter((idx) => {
            return idx !== index;
        })
        this.setState({
            heroList: list
        })
    }
}

export default App;

App.css:

.item-enter {
    /*
    进入动画执行之前绑定的类名
    */
    opacity: 0;
    transform: translateX(100%);
}

.item-enter-active {
    /*
    进入动画执行过程中绑定的类名
    */
    opacity: 1;
    transform: translateX(0);
    transition: all 3s;
}

.item-enter-done {
    /*
    进入动画执行完毕之后绑定的类名
    */
}

.item-exit {
    /*
    退出动画执行之前绑定的类名
    */
    opacity: 1;
    transform: translateX(0);
}

.item-exit-active {
    /*
    退出动画执行过程中绑定的类名
    */
    opacity: 0;
    transform: translateX(100%);
    transition: all 3s;
}

.item-exit-done {
    /*
    退出动画执行完毕之后绑定的类名
    */
}

注意点

• 在企业开发中一定要保证 CSSTransition key 的唯一性，否则动画会失效
• TransitionGroup 与 CSSTransition 是紧贴的，中间不能包含其它元素，否则动画则不会生效