React-组件-SwitchTransition

SwitchTransition

• SwitchTransition 可以完成组件切换的动画
• SwitchTransition 组件里面要有 CSSTransition 或者 Transition 组件，不能直接包裹你想要切换的组件
• SwitchTransition 里面的 CSSTransition 或 Transition 组件不再像以前那样接受 in 属性来判断元素是何种状态，取而代之的是 key 属性

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

案例

更改 App.js:

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

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

    render() {
        return (
            <div>
                <SwitchTransition
                    mode={'in-out'}
                >
                    <CSSTransition
                        key={this.state.isOn}
                        timeout={3000}
                        classNames={'btn'}
                    >
                        <button onClick={() => {
                            this.setState({
                                isOn: !this.state.isOn
                            })
                        }}>
                            {this.state.isOn ? 'on' : 'off'}
                        </button>
                    </CSSTransition>
                </SwitchTransition>
            </div>
        );
    }
}

export default App;

App.css:

.btn-enter {
    /*
    进入动画执行之前绑定的类名
    */
    opacity: 0;
    transform: translateX(-100%);
}
.btn-enter-active {
    /*
    进入动画执行过程中绑定的类名
    */
    opacity: 1;
    transform: translateX(0);
    transition: all 3s;
}
.btn-enter-done {
    /*
    进入动画执行完毕之后绑定的类名
    */
}

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

button {
    padding: 10px 20px;
    margin-left: 50%;
}

可以通过 mode 更改动画的效果是从内到外，还是从外到内的动画。