Tabla de contenido
Dos, combinado con animate.css
4. Animación de transición de enrutamiento
5. Encapsulación de componentes de alto nivel
Sitio web oficial: React Transition Group
1. Uso básico
En el proyecto, puede haber algún efecto de visualización de animación o efecto de cambio de página.La forma de animación css es relativamente limitada y no se puede manejar cuando se trata de alguna animación js. react-transition-group es un módulo de terceros de react.Con este módulo, es más conveniente realizar efectos de animación más complejos
Instalar: npm i -S grupo de transición de reacción
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;
codigo 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;
}Dos, combinado con animate.css
biblioteca de animación animate.css integrada en el módulo de animación react-transation-group
Imagen: Animate.css | Una biblioteca multinavegador de animaciones CSS.
npm instalar animate.css --guardar
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;3. Lista de transición
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;
4. Animación de transición de enrutamiento
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 Transtion5. Encapsulación de componentes de alto nivel
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
}
cita
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