React-组件-Transition回调函数

React 官方文档：https://reactcommunity.org/react-transition-group/transition

本文主要介绍的就是 Transition 在之前的三种状态会自动触发对应的回调函数，在以后的需求当中可能会有在指定的回调函数当中进行编写对应的业务代码，所以这里只是样式一下它的执行时机。

生命周期方法

• onEnter
• onEntering
• onEntered
• onExit
• onExiting
• onExited

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

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isShow: true
        }
    }

    render() {
        return (
            <div>
                <CSSTransition in={this.state.isShow}
                               classNames={'box'}
                               timeout={3000}
                               unmountOnExit={true}
                               appear
                               onEnter={
                                   console.log('进入动画开始之前')
                               }
                               onEntering={
                                   console.log('进入动画执行过程中')
                               }
                               onEntered={
                                   console.log('进入动画执行完毕')
                               }
                               onExit={
                                   console.log('退出动画开始之前')
                               }
                               onExiting={
                                   console.log('退出动画执行过程中')
                               }
                               onExited={
                                   console.log('退出动画执行完毕')
                               }
                >
                    <div/>
                </CSSTransition>
                <button onClick={() => {
                    this.setState({
                        isShow: true
                    })
                }}>显示
                </button>
                <button onClick={() => {
                    this.setState({
                        isShow: false
                    })
                }}>隐藏
                </button>
            </div>
        );
    }
}

export default App;