过渡动效在项目中是一个必须的业务
React过渡动效通过react-transition-group和animate.css第三方模块来实现
代码演示
App.js
import React, { Component } from 'react'
import {CSSTransition} from 'react-transition-group'
export default class App extends Component {
state={
flag:true
}
changeFlag=()=>{
this.setState({
flag:!this.state.flag
})
}
render() {
const {flag}=this.state
return (
<div>
<h3>过渡动效</h3>
<button onClick={this.changeFlag}>修改flag</button>
<CSSTransition
in={flag}//跟控制动画元素的状态
classNames={{
enter:"animate__animated",//进入的类名
enterActive:"animate__slideInLeft",//进入过程
exit:"animate__animated",//离开
exitActive:"animate__slideOutLeft"//离开过程
}}
unmountOnExit//卸载,离开时卸载CSSTransition
timeout={4000}//过渡时间
>
<p>动画元素</p>
</CSSTransition>
</div>
)
}
}
可以与Vue的过渡动效进行比较
<transition
enter-active-class="animate__animated animate__slideInLeft"
leave-active-class="animate__animated animate__slideOutLeft"
>
</transition>