Verwenden von Transitionend Event-Listener mit reagieren, um einen Übergang zu erstellen

Question

Ich versuche, einen einfachen Übergang mit reagieren auf einen Klick klicken, wo die Körper max-Höhe geht auf 0 bei ComponentWill Update, dann wieder auf 500px oder 100% auf ComponentDidUpdate . Ich konnte es aus den anderen Fragen, die ich gesehen habe, nicht verstehen. Könnte mir jemand ein Beispiel mit einer Erklärung zeigen, wie es funktioniert?

Ich hätte auch nichts dagegen, ein Beispiel/Erklärung reactstransitiongroup.

Mehr Infos

Ich verstehe, dass transitionend legt ein Zuhörer Ereignis aber, was ich immer verwirrt mit ist, wie das verwenden, um die Komponente, um sicherzustellen, nicht aktualisiert, bis der Übergang beendet ist (ich habe Ich lehrte mich selbst zu reagieren und so ziemlich all meine Programmierkenntnisse, so dass ich nicht weiß, ob dies als schwer zu verstehen gilt, aber es ist im Moment für mich schwierig). Danke allen!

Answer 1

So nach ein wenig Ruhe entschied ich, dass es Zeit für ein weiteres Kapitel von "Student Teachers Student" war (geschrieben Regie und mit mir).

Um meine eigene Frage erfolgreicher zu beantworten, hängt der Transition-End-Event-Listener einen Listener an ein Element an und löst eine Callback-Funktion aus, wenn der Übergang beendet ist. Das Problem, das ich hatte, war, dass dies async ist und daher würde es nicht funktionieren, es in ComponentWillUpdate zu setzen, da das DOM vor Abschluss des Übergangs gerendert würde. Die aktuelle Problemumgehung besteht darin, dass der Aufruf der Schaltfläche click für eine Funktion aufgerufen wird, die den Ereignis-Listener enthält, und dass die Callback-Funktion von trnasitionend den Status der Komponente ändert. Auf diese Weise wird kein Rendering durchgeführt, bis der Übergang abgeschlossen ist.

Code:

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 (überprüfen Sie die codepen