今天开始写modal组件的动画部分， modal组件逻辑部分使用react这种框架特别好实现，抑制状态控制显隐，然后是一些回调事件什么的。但是我感觉动画部分是最难的，因为react不像之前jquery的开发模式，状态模式不太建议用过程式的编程方式。也就是说，以前我们通过getElementById 拿到DOM实例，然后去改变这个实例的style属性，这种方法，虽然可以用refs去实现，但是，不推荐。
原理
最近看了一些文章，这个弹框组件的动画用css的class去封装，我们用state去控制className的变化，使用定时器，去间歇性地改变state。
比如，要实现弹框的进入动画，我先写三个css的class， 分别表示，开始进入，进入中，进入结束。
.sevenmodal-enter {
transform: scale(0);
}
.sevenmodal-enter-active {
transform: scale(1.1);
transition: all .2s linear;
}
.sevenmodal-enter-end {
transform: scale(1);
transition: all .1s linear;
}
这个class是要加在挂载弹框主界面最外层的div上的，而且这个className是会变化的。
enterAnimation(status) {
const enterClass = 'sevenmodal-enter '
const enterActiveClass = 'sevenmodal-enter-active'
const enterEndClass = 'sevenmodal-enter-end'
const enterClassTime = 100
const enterActiveTime = 200
this.setState({
currrentVisable: status,
modalClasses: enterClass,
})
const enterActiveTimeout = setTimeout(() => {
this.setState({
modalClasses: enterActiveClass,
})
clearTimeout(enterActiveTimeout)
}, enterClassTime)
const endActiveTimeout = setTimeout(() => {
this.setState({
modalClasses: enterEndClass
})
clearTimeout(endActiveTimeout)
}, enterActiveTime + enterActiveTime)
const initTimeout = setTimeout(() => {
this.setState({
modalClasses: ''
})
clearTimeout(initTimeout)
}, enterActiveTime + enterActiveTime + 10)
}
在这个进入动画的函数中，我们要有三个定时器，还有启动三个定时器的时间，第一个定时器是瞬发，第二个定时器在0.1秒后启动....以此类推，这样state中的modalClasses就会改变，只要将这个modalClasses加载在相应div的className上就可以达到动画的渐入渐出效果。
封装成一个独立的动画组件
这一步我们考虑的是将动画部分封装成一个高阶组件，之前的代码，外层用了一个className为sevenmodal-wrapper的div包裹，如果有这个高阶组件，就可以取而代之，这样可以达到解耦的效果，代码更加整洁
- 第一步我们要吧sevenmodal组件控制显隐的状态visable作为props传给这个动画组件,通过这个props来判断是执行离开动画还是进入动画，
class SevenTransition extends React.Component {
state = {
modalClasses: '',
currrentVisable: false,
}
componentWillReceiveProps(nextProps) {
const { animation } = nextProps
if (!animation) {
return
}
if (!nextProps.visible) {
console.log('ebter leaveAnimation');
this.leaveAnimation(nextProps.visible)
} else {
console.log('enter enterAnimation');
this.enterAnimation(nextProps.visible)
}
}
}
SevenTransition.defaultProps = {
animation: true,
}
SevenTransition.propTypes = {
animation: PropTypes.bool, // 是否启动动画效果
visible: PropTypes.bool,
}
2.离开和进入动画
enterAnimation(status) {
const enterClass = 'sevenmodal-enter '
const enterActiveClass = 'sevenmodal-enter-active'
const enterEndClass = 'sevenmodal-enter-end'
const enterClassTime = 100
const enterActiveTime = 200
this.setState({
currrentVisable: status,
modalClasses: enterClass,
})
const enterActiveTimeout = setTimeout(() => {
this.setState({
modalClasses: enterActiveClass,
})
clearTimeout(enterActiveTimeout)
}, enterClassTime)
const endActiveTimeout = setTimeout(() => {
this.setState({
modalClasses: enterEndClass
})
clearTimeout(endActiveTimeout)
}, enterActiveTime + enterActiveTime)
const initTimeout = setTimeout(() => {
this.setState({
modalClasses: ''
})
clearTimeout(initTimeout)
}, enterActiveTime + enterActiveTime + 10)
}
leaveAnimation(status) {
const leaveClass = 'sevenmodal-leave'
const leaveActiveClass = 'sevenmodal-leave-active'
const leaveEndClass = 'sevenmodal-leave-end'
const leaveTime = 10
const leaveActiveTime = 200
const leaveEndTime = 100
this.setState({
modalClasses: leaveClass
})
const leaveActiveTimeout = setTimeout(() => {
this.setState({
modalClasses: leaveActiveClass
})
clearTimeout(leaveActiveTimeout)
}, leaveTime)
const leaveEndActiveTimeout = setTimeout(() => {
this.setState({
modalClasses: leaveEndClass
})
}, leaveTime + leaveActiveTime)
const initTimeout = setTimeout(() => {
this.setState({
modalClasses: '',
currrentVisable: status
})
clearTimeout(initTimeout)
}, leaveTime + leaveActiveTime + leaveEndTime)
}
- 最后一步，clone子元素，动画组件最终的目的是生成一个dom元素，将state中的modalClass加载到子元素的第一个div的class中去，所以我们这里使用了react自带的cloneElement方法
cloneChildren = () => {
const { children } = this.props
const { modalClasses } = this.state
console.log('modalClasses', modalClasses);
const oldClassname = children.props.className
return React.cloneElement(
children,
{ className: `${oldClassname} ${modalClasses}` }
)
}
render() {
const { currrentVisable } = this.state
return currrentVisable && this.cloneChildren()
}
