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

Question

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

我也不介意 example/explanation 使用 reactcsstransitiongroup。

更多信息

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

Answer 1

因此，经过一番休息后，我决定是时候阅读 'Student teaches Student' 的另一章（由我执导并由我主演）。

为了更简洁地回答我自己的问题，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

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

Using transitionend event listener with react to create a transition

javascript

transition

reactjs

transitionend