1. React过渡动画
- 在React中我们可以通过原生的CSS来实现过渡动画，
但是React社区为我们提供了react-transition-group帮助我们快速过渡动画
2. 动画组件：
-
Transition
- 该组件是一个和平台无关的组件（不一定要结合CSS）；
- 在前端开发中，我们一般是结合CSS来完成样式，所以比较常用的是CSSTransition；
-
CSSTransition
- 在前端开发中，通常使用CSSTransition来完成过渡动画效果
-
SwitchTransition
- 两个组件显示和隐藏切换时，使用该组件
-
TransitionGroup
- 将多个动画组件包裹在其中，一般用于列表中元素的动画；
1.1 原生CSS实现动画
原生CSS一般是通过state转换为props再结合style-conponents以及逻辑完成动画
const StyleDiv = styled.div`
width: ${props => props.width};
height: ${props => props.height};
background: skyblue;
opacity: ${props => props.opacity};
transition: all 3s;
`
class App extends React.Component{
constructor(props){
super(props);
this.state = {
width: 0,
height: 0,
opacity:0
}
}
render(){
return (
<div>
<StyleDiv {...this.state}></StyleDiv>
<button onClick={()=>{this.btnClick()}}>按钮</button>
</div>
);
}
btnClick(){
this.setState({
width: '100px',
height: '100px',
opacity:1
})
}
}
export default App;
1.2 CSSTransition容器组件
在前端开发中，通常使用CSSTransition来完成过渡动画效果
- 如何通过CSSTransition来实现过渡效果?
1.1 安装react-transition-group
npm install react-transition-group --save
1.2 从安装好的库中导入CSSTransition
import {CSSTransition} from 'react-transition-group';
1.3利用CSSTransition将需要执行过渡效果的组件或元素包裹起来
1.4 编写对应的CSS动画
实现:.-enter/.-enter-active/.-enter-done/.-exit/.-exit-active/.-exit-done
1.5给CSSTransition添加一些属性
in属性 :
取值是一个布尔值, 如果取值为false表示触发退出动画, 如果取值是true表示触发进入动画
classNames属性:
指定动画类名的前缀
timeout属性 :
设置动画超时时间
3.CSSTransition状态
- CSSTransition有三个状态：
- appear: 初始
- enter : 进入
- exit；: 退出
- 当组件第一次加载时候会自动查找
-appear / -appear-active / -appear-done - 当组件显示时会自动查找
-enter / -enter-active / -enter-done - 当组件退出时会自动查找
-exit / -exit-active / -exit-done
4.unmountOnExit:
unmountOnExit如果取值为true, 那么表示退出动画执行完毕之后删除对应的元素
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: false
}
}
render(){
return (
<div>
<CSSTransition in={this.state.isShow}
classNames={'box'}
timeout={3000}
appear
unmountOnExit={true}>
<div></div>
</CSSTransition>
<button onClick={()=>{this.btnClick()}}>显示</button>
</div>
);
}
btnClick(){
this.setState({
isShow: true
})
}
}
export default App;
.box-enter{
/*进入动画执行之前绑定的类名*/
width: 0;
height: 0;
opacity: 0;
background: skyblue;
}
.box-enter-active{
/*进入动画执行过程中绑定的类名*/
width: 100px;
height: 100px;
opacity: 1;
transition: all 3s;
}
.box-enter-done{
/*进入动画执行完毕之后绑定的类名*/
width: 100px;
height: 100px;
opacity: 1;
background: red;
}
.box-exit{
/*退出动画执行之前绑定的类名*/
width: 100px;
height: 100px;
opacity: 1;
background: red;
}
.box-exit-active{
/*退出动画执行过程中绑定的类名*/
width: 0;
height: 0;
opacity: 0;
transition: all 3s;
}
.box-exit-done{
/*退出动画执行完毕之后绑定的类名*/
width: 0;
height: 0;
opacity: 0;
background: skyblue;
}
.box{
width: 100px;
height: 100px;
background: skyblue;
}
.box-appear{
/*初始化动画执行之前绑定的类名*/
width: 0;
height: 0;
opacity: 0;
background: skyblue;
}
.box-appear-active{
/*初始化动画执行过程中绑定的类名*/
width: 100px;
height: 100px;
opacity: 1;
transition: all 3s;
}
.box-appear-done{
/*初始化动画执行完毕之后绑定的类名*/
width: 100px;
height: 100px;
opacity: 1;
background: red;
}
2. transition 回调函数
- 生命周期方法
onEnter/onEntering/onEnteredonExit/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 = {this.myFn}
onEntering={()=>{console.log('进入动画执行过程中');}}
onEntered={()=>{console.log('进入动画执行完毕');}}
>
<div className={'box'}></div>
</CSSTransition>
<button onClick={()=>{this.btnClick1()}}>显示</button>
<button onClick={()=>{this.btnClick2()}}>隐藏</button>
</div>
);
}
myFn(currentEl, isAppear){
// console.log(currentEl, isAppear);
console.log('进入动画开始之前');
}
btnClick1(){
this.setState({
isShow: true
})
}
btnClick2(){
this.setState({
isShow: false
})
}
}
export default App;
image.png
3. Transition
SwitchTransition
-
SwitchTransition可以完成组件切换的动画 -
SwitchTransition组件里面要有CSSTransition或者Transition组件，不能直接包裹你想要切换的组件 -
SwitchTransition里面的CSSTransition或Transition组件不再像以前那样接受in属性来判断元素是何种状态, 取而代之的是key属性
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;
import React from 'react';
import './App.css'
import {CSSTransition, TransitionGroup} from 'react-transition-group';
class App extends React.Component{
constructor(props){
super(props);
this.state = {
// heroList : ['鲁班', '鲁班', '鲁班']
heroList:[
{id:1, name:'鲁班'},
{id:2, name:'虞姬'},
{id:3, name:'黄忠'},
]
}
}
render(){
return (
<div>
<ul>
<TransitionGroup>
{
/*
注意点:
在企业开发中一定要保证CSSTransition key的唯一性
* */
this.state.heroList.map((obj, index) =>{
return (
<CSSTransition key={obj.id}
timeout={3000}
classNames={'item'}>
<li onClick={()=>{this.removeHero(index)}}>{obj.name}</li>
</CSSTransition>
)
})
}
</TransitionGroup>
</ul>
<button onClick={()=>{this.btnClick()}}>新增</button>
</div>
);
}
btnClick(){
this.setState({
// heroList: [...this.state.heroList, '阿珂']
heroList: [...this.state.heroList, {id: this.state.heroList.length + 1, name:'阿珂'}]
})
}
removeHero(index){
// console.log(index);
const list = this.state.heroList.filter((name, idx) =>{
return idx !== index;
})
// console.log(list);
this.setState({
heroList: list
})
}
}
export default App;
