目录
一、基本使用
在项目中可能会有一些动画效果展示或是页面切换效果，css动画的方式，比较局限，涉及到一些js动画的时候没法处理了。react-transition-group是react的第三方模块，借住这个模块可以更方便的实现更加复杂的动画效果
安装：npm i -S react-transition-group
import React, { Component } from 'react';
import {CSSTransition} from 'react-transition-group'
import './Dom.css'
class Dom extends Component {
state ={
show:true
}
hander =()=>{
this.setState({
show: !this.state.show
})
}
render() {
return (
<div>
<CSSTransition
in = {this.state.show}
//控制动画进场或离场开关
timeout={ 3000 }
//动画时长
classNames="xzl"
// 动画元素div
unmountOnExit
// 动画退场以后删除dom
>
<h4>大聪明码农徐</h4>
</CSSTransition>
<button onClick={this.hander}>点击一下</button>
</div>
);
}
}
export default Dom;
css代码
.xzl-enter {
opacity: 0;
}
.xzl-enter-active {
opacity: 1;
transition: opacity 2000ms;
}
.xzl-exit {
opacity: 1;
}
.xzl-exit-active {
opacity: 0;
transition: opacity 2000ms;
}二、结合animate.css
animate.css动画库集成到react-transation-group动画模块中
网址：Animate.css | A cross-browser library of CSS animations.
npm install animate.css --save
import React, { Component } from 'react';
import {CSSTransition} from 'react-transition-group'
// import './Dom.css'
import"animate.css"
class Dom extends Component {
state ={
show:true
}
hander =()=>{
this.setState({
show: !this.state.show
})
}
render() {
return (
<div>
<CSSTransition
in = {this.state.show}
//控制动画进场或离场开关
timeout={ 3000 }
//动画时长
classNames={
{
enter: 'animate__animated',//初始化animate库
enterActive: 'animate__zoomInDown', //进场动画可以选配
exit: 'animate__animated',//初始化animate库
exitActive: 'animate__zoomOutDown',//离场动画可以选配
}} //动态元素class
// 动画元素div
unmountOnExit
// 动画退场以后删除dom
>
<h4>大聪明码农徐</h4>
</CSSTransition>
<button onClick={this.hander}>点击一下</button>
</div>
);
}
}
export default Dom;三、列表过渡
import React, { Component } from 'react';
import { TransitionGroup,CSSTransition } from 'react-transition-group'
class List extends Component {
state = {
list:[1,3,4,5,6],
show:false
}
hander =()=>{
this.setState({
show:!this.state.show
})
}
render() {
return (
<>
<button onClick={this.hander}>点我</button>
<TransitionGroup>
{
this.state.list.map((item,index) =>{
return <CSSTransition
in = {this.state.show}
timeout = {2000}
unmountOnExit
onEntered={(el) =>{el.style.color='red'}}
appear = {true} //首屏加载
key = {index}
>
<div>
{item}
</div>
</CSSTransition>
})
}
</TransitionGroup>
</>
);
}
}
export default List;
四、路由过渡动画
import React, { Component } from 'react'
import { Switch,Route,Link,withRouter } from 'react-router-dom'
import { TransitionGroup,CSSTransition } from 'react-transition-group'
import Home from '../pages/Home'
import User from '../pages/User'
@withRouter
class Transtion extends Component {
render() {
console.log(this.props);
return (
<div>
<h3>路由动画</h3>
<Link to="/home">Home按钮</Link>|
<Link to="/user">User按钮</Link>
<TransitionGroup>
<CSSTransition
// in={true}
timeout={2000}
// classNames="myfade"
classNames={
{
enter: 'animate__animated',
enterActive: 'animate__slideInLeft', //动画效果
exit: 'animate__animated',
exitActive: 'animate__slideOutLeft' //动画效果
}}
unmountOnExit
key={this.props.location.pathname}
>
<Switch>
<Route path="/home" component={ Home } />
<Route path="/user" component={ User } />
</Switch>
</CSSTransition>
</TransitionGroup>
</div>
)
}
}
export default Transtion五、高阶组件的封装
import React,{ Component} from 'react'
import { CSSTransition } from 'react-transition-group'
//高阶组件 函数 里面创建一个类组件 返回当前的类组件
export default function withTranstion( Cmp ) {
class TransCom extends Component{
render(){
console.log('this.props.match',this.props.match); //只要这里面有路由对象 说明当前路由要执行动画
return <CSSTransition
in={this.props.match !== null}
timeout={600}
classNames={
{
enter: 'animate__animated',
enterActive: 'animate__fadeIn',
exit: 'animate__animated',
exitActive: 'animate__fadeOut'
}}
unmountOnExit
>
<Cmp {...this.props} />
</CSSTransition>
}
}
return TransCom
}
引用
import React, { Component } from 'react'
import { Switch,Route,Link,withRouter } from 'react-router-dom'
import { TransitionGroup,CSSTransition } from 'react-transition-group'
import Home from '../pages/Home'
import User from '../pages/User'
@withRouter
class Transtion extends Component {
render() {
console.log(this.props);
return (
<div>
<h3>路由动画</h3>
<Link to="/home">Home按钮</Link>|
<Link to="/user">User按钮</Link>
{/* chlidren渲染方式不管路由陪陪与否 组件都渲染 */}
<Route path="/home" children={ props=> <Home {...props}/>}></Route>
<Route path="/user" children={ props=> <User {...props}/>}></Route>
</div>
)
}
}
export default Transtion