React-组件-SwitchTransition

前言

SwitchTransition 是 React Transition Group 库的一部分，用于创建平滑的组件切换效果。它可以帮助你在应用程序中实现流畅的组件过渡。SwitchTransition 可以轻松管理两个组件之间的切换，通常用于路由转换或其他视觉元素的变化。你可以使用 CSS 过渡或动画库，如 CSS Transition 或 CSS Modules，与 SwitchTransition 配合使用，以创建令人印象深刻的用户界面效果。

SwitchTransition 的核心思想是在两个组件之间进行切换时，首先将前一个组件离开视图，然后插入新组件，实现无缝的切换效果。它通过 React 的状态管理机制来实现这一点，使你可以更容易地处理组件之间的过渡效果。

通过合理配置 SwitchTransition，你可以创建各种各样的过渡效果，提升你的应用程序的用户体验，让界面更具吸引力和交互性。这个库在构建响应式和动态的用户界面时非常有用，是 React 生态系统中一个强大的工具。

SwitchTransition

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

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

案例

更改 App.js:

代码语言：javascript复制

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:

代码语言：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 更改动画的效果是从内到外，还是从外到内的动画。

输入图片说明

最后

本期结束咱们下次再见