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-groupnpm install react-transition-group --save
1.2 从安装好的库中导入CSSTransitionimport {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;
