自己使用react写一个弹框组件（4）

今天开始写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()
    
  }

自己使用react写一个弹框组件（4）

原理

封装成一个独立的动画组件

猜你喜欢