javascript – 使用transitionend事件监听器和react来创建转换

我正在尝试进行一个简单的过渡,在按钮单击时做出反应,其中body max-height在componentwill update上变为0,然后在componentDidUpdate上变回500px或100％.从我见过的其他问题来看,我并不是很了解它,所以有人可以给我一个例子,说明它是如何工作的吗？

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

更多信息

我理解transitionend会附加一个事件监听器,但我对此感到困惑的是如何使用它来确保组件在转换完成之前不会更新(我已经教会了自己的反应以及几乎所有的编码知识所以我不知道这是不是很难理解,但现在对我来说很难.谢谢大家！

最佳答案

所以经过一段时间的休息,我决定是时候再来一章“学生教学生”(由我指导并主演).

为了更自觉地解决我自己的问题,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 (
        transitionendEventName = this.transitionendEventName.bind(this)
    this.hideApp = this.hideApp.bind(this)
    this.removeEvent = this.removeEvent.bind(this)
  }

  getButton() {
    if (this.state.showButton){
        return 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,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 (
        

codepen
(查看codepen