javascript - 将 transitionend 事件监听器与 react 一起使用以创建过渡

Question

我正在尝试通过对按钮单击使用react来进行简单的转换，其中 body max-height 在 componentWill 更新时变为 0，然后在 componentDidUpdate 上返回到 500px 或 100%。我还没有从我看到的其他问题中完全理解它，所以有人可以给我举一个例子来解释它是如何工作的吗？

我也不介意使用 reactcsstransitiongroup 的示例/解释。

更多信息

我知道 transitionend 附加了一个事件监听器，但我感到困惑的是如何使用它来确保组件在转换完成之前不会更新(我自学了 react 和几乎所有的编码知识，所以我不知道这是否应该很难理解，但目前对我来说很难)。谢谢大家!

Answer 1

因此，经过一番休息后，我决定是时候开始“学生教学生”的另一章(由我执导和主演)。

为了更简洁地回答我自己的问题，transitionend 事件监听器将一个监听器附加到一个元素，并在转换结束时触发一个回调函数。我遇到的问题是这是异步的，因此将它放在 componentWillUpdate 中是行不通的，因为 DOM 会在转换完成之前呈现。我当前的解决方法是让按钮单击调用包含事件监听器的函数，并让 trnasitionend 的回调函数更改组件的状态。这样，在转换完成之前不会进行任何渲染。

代码:

class Button2 extends React.Component {
  constructor(props){
    super(props)
    this.onClickHandler = this.onClickHandler.bind(this)
  }

  onClickHandler(){
    this.props.onClick("Button2")
  }

  render() {
    return (
        <button onClick={this.onClickHandler} id="button2">
            BUTTON2!!
        </button>
    )



 }
}

class Button1 extends React.Component {

  constructor(props){
    super(props)
    this.onClickHandler = this.onClickHandler.bind(this)
  }

  onClickHandler(){
    this.props.onClick('Button1')
  }

  render() {
    return (
        <button onClick={this.onClickHandler} id="button1">
            BUTTON1!!
        </button>
    )
  }
}

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      showButton : true,
      hide: false
    }
    this.changeButtonState = this.changeButtonState.bind(this)
    this.getButton = this.getButton.bind(this)
    this.transitionEndEventName = this.transitionEndEventName.bind(this)
    this.hideApp = this.hideApp.bind(this)
    this.removeEvent = this.removeEvent.bind(this)
  }

  getButton() {
    if (this.state.showButton){
        return <Button1 onClick={this.hideApp}/>
      } else {
        return <Button2 onClick={this.hideApp}/>
      }
  }

  transitionEndEventName () {
    var el = document.createElement('div')//what the hack is bootstrap

    var transEndEventNames = {
      WebkitTransition : 'webkitTransitionEnd',
      MozTransition    : 'transitionend',
      OTransition      : 'oTransitionEnd otransitionend',
      transition       : 'transitionend'
    }

    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return transEndEventNames[name];
      }
    }

    return false // explicit for ie8 (  ._.)
}


  hideApp(button) {
    var app = document.getElementById('main')
    var transitionEnd = this.transitionEndEventName()
    app.addEventListener(transitionEnd, this.removeEvent, false)
        app.classList.contains('show-element') ? app.classList.remove('show-element') : null
        app.classList.add('remove-element')
  }

  removeEvent(){
    console.log('hey')
    var app = document.getElementById('main')
    var transitionEnd = this.transitionEndEventName()
    app.removeEventListener(transitionEnd, this.removeEvent, false)
    this.changeButtonState()
  }

  changeButtonState(button) {
    this.setState({
      showButton: !this.state.showButton,
      hide: true
    })
  }

  componentDidUpdate(){
    var app = document.getElementById('main')
    app.classList.contains('remove-element') ? app.classList.remove('remove-element') : null
    app.classList.add('show-element')
  }

  render(){
    var button = this.getButton()
    return (
        <div id="button-container">
            {button}
        </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('main'))

代码笔(检查 codepen