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