ReactCSSTransitionGroupアニメーションが終了する前にReactが削除されています

Question

私はアイコンのリストでテキストの行を取り替える予定のコンポーネントです。 ReactCSSTransitionGroupを使用して、テキストの開始とアイコンの入力をアニメートしようとしています。アイコンの入力はうまく動作しますが、アニメーションを実行する前に、反応するとテキストのDOMが消去されます。コンポーネントのレンダリング状態は次のとおりです。

render() { 
    return (
    <section className="SocialBlock" onMouseOver={this.showIcons} onMouseLeave={this.hideIcons}> 
    {(() => { 

     if (this.state.iconsAreVisible) { 
     return (
      <div className={`socialAccounts`}> 
      <ReactCSSTransitionGroup 
      transitionName="socialIcons" 
      transitionEnterTimeout={500} 
      transitionLeaveTimeout={300} 
      transitionAppear={true} > 

      {socials.map((icon, index) => { 
      return <div className={`icon icon-${index+1}`} key={index}><InlineSVG src={icon} /></div> 
      })} 
      </ReactCSSTransitionGroup> 
      </div> 
     ) 
     } else { 
     return (
      <ReactCSSTransitionGroup 
      transitionName="socialText" 
      transitionEnterTimeout={500} 
      transitionLeaveTimeout={500} 
      transitionAppear={true} > 
      <div key="12313"><h3>Check out the social stuff!</h3></div> 
      </ReactCSSTransitionGroup>) 
     } 


    })()} 

    </section> 
    ); 
} 

なぜ動作しないのか分かりません。アニメーションクラスをleaveの代わりにappearに切り替えることができ、それはエントリーのために機能しますが、出発はまだ突然です。

Answer 1

コンポーネントの構造上、この現象が発生しています。

(this.state.iconsvisible == false)の場合、<ReactCSSTransitionGroup>の2番目の文字はすべてアンマウントされ、レンダリングされません。

そして、leaveへの移行の機会はありません。
残してアニメーションする必要があるものは、<ReactCSSTransitionGroup>の内部にある必要があります。

は、あなたがこれを行うことができ、修正するには：おそらく

<section> 
{ 
    <ReactCSSTransitionGroup> 
    { if (this.state.iconsarevisible) { 
     socials.map(...) 
    } 
    } 
    </ReactCSSTransitionGroup> 
    <ReactCSSTransitionGroup> 
    { if (!this.state.iconsarevisible) { 
     <div>Check out social stuff</div> 
    } 
    } 
    </ReactCSSTransitionGroup> 
} 
</section>