前言
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:
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 更改动画的效果是从内到外，还是从外到内的动画。
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
