一:前言
关于react 动画组件已经有很多,最近想自己做一个,目的就是依赖css3动画,这样能保证性能,项目种简单动画足够了;如果要复杂一些的动画,那就依赖于js了,本篇主要实现一个Animate组件,给组件内部添加元素的入场动画和出场动画,于是就花费半天时间试试,主要采用animate.css,大家一定很熟悉,下面就是思路和代码,肯定有需要完善的地方,请各位大神批评指导。
二:Animate组件
首先要引入 animate.css
import React from 'react';
export default class Animate extends React.Component {
state = {
animateName: '',//切换动画class名称
animateChild: null,//做一个缓存
}
currentTime = new Date()
componentWillReceiveProps(nextProps) {
let prevChild = this.props.children
let nextChild = nextProps.children
let { enterClass, leaveClass } = this.props
let expirationTime = new Date()
if(!this._isExpiration(expirationTime)){
return
}//防止过快点击
this.currentTime = expirationTime
if(nextChild !== null){
this.setState({
animateChild: nextChild,
animateName: enterClass,
})
} else if (prevChild !== null) {
this.setState({
animateName: leaveClass,
})
setTimeout(()=>{
this.setState({
animateChild: null,
})
},500)// 离场延迟时间,也可以传props
} else {
return
}
}
_isExpiration(expirationTime) {
return expirationTime.getTime() - this.currentTime.getTime() > 500
}
render() {
const { animateName, animateChild } = this.state
return (
<span className={'animated ' + animateName} style={{ display: 'block' }}>
{animateChild}
</span>
)
}
}
三:调用
import React from 'react';
import styles from './index.less';
import Animate from '../components/index';
export default class AnimatedDemo extends React.Component {
state = {
show: false,
}
render() {
const { show } = this.state
return (
<div className={styles.Reading_activity}>
<Animate enterClass='slideInRight' leaveClass='bounceOutRight'>
{show ? <div className={styles.site__title + ' ' + styles.mega}>Animate.css</div> : null}
</Animate>
<button onClick={()=>{this.setState({show: false})}}>消失</button>
<button onClick={()=>{this.setState({show: true})}}>出现</button>
</div>
)
}
}
就到这里,下期见