transitionendを使って遷移イベントリスナーを使って遷移を作成する

Question

私は、bodyWillの更新でbody max-heightが0になるボタンクリックで反応して単純な遷移を作成しようとしています。その後、componentDidUpdateの500pxまたは100％ 。私が見た他の質問からそれをかなり理解している人はいませんでした。

また、reactcsstransitiongroupを使用した例/説明は気にしません。

詳細

私は私がしました（そのtransitionendは、イベントリスナーアタッチ理解しますが、私がして混乱してると、移行が完了するまで更新されないコンポーネントを確実にするためにそれを使用する方法です私のコーディングの知識はかなり反応していますので、理解するのが難しいと褒められているかどうかわかりませんが、現時点では私にとっては難しいです）。皆さんありがとう！

Answer 1

なので、もう少し休んだ後、私は、「学生が学生を教える」という別の章があると決めた（指示され、主演してくれた）。

私は自分自身の質問にもっとsuccintly、transitionendイベントリスナーは、要素にリスナーを接続し、移行が終了するたびにコールバック関数を起動します。私が持っていた問題は、これが非同期であるため、移行が完了する前にDOMがレンダリングするので、componentWillUpdateに配置することはできませんでした。私の現在の回避策は、ボタンをクリックしてイベントリスナーを含む関数を呼び出し、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 （誰もがこれを読んで、あなたはその適切にその途中でアプリ遷移アウトではなく、同様ときに気づくでしょうcodepen見ている場合codepen