React entfernt dom, bevor die Animation ReactCSSTransitionGroup beendet wird

Question

I eine Komponente, die eine Textzeile mit einer Liste von Symbolen austauschen soll. Ich versuche den Abgang des Textes und die Eingabe der Icons mit ReactCSSTransitionGroup zu animieren. Die Eingabe der Symbole funktioniert gut, aber reagieren tötet das Dom des Textes, bevor die Animation ausgeführt werden kann. Hier ist der Render-Zustand der Komponente:

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> 
    ); 
} 

Ich bin mir nicht sicher, warum es nicht funktioniert. Ich kann meine Animation Klassen zu appear statt leave wechseln und es funktioniert für den Eintrag - aber die Abfahrt ist immer noch abrupt.

Answer 1

Sie erhalten dieses Verhalten aufgrund der Struktur Ihrer Komponente.

Wenn (this.state.iconsvisible == false), dann Ihre gesamte zweite <ReactCSSTransitionGroup> wird abgehängt und wird nicht gerendert.

Und dann bekommt es nicht die Chance, seinen leave Übergang zu tun.
Alles, was beim Verlassen belebt werden soll, sollte innerhalb der <ReactCSSTransitionGroup> sein.

zu beheben, können Sie dies tun:

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