javascript - Reactjs animate replace: How to wait for fade out before adding content to fade in? -

i trying use reactcsstransitiongroup replace content fading out content, waiting disappear completely, , fading in new content.

i using key props solution this related question, content being swapped out , animated. problem, though, new content added dom , takes space in flow start, rather waiting until old content has faded out. i.e., can delay fading in transition delay, gap content fade in there start. since css visibility:hidden still adds space element in flow using opacity doesn't either.

my question: there way achieve desired outcome using css? if not, presume component have detect end of fade-out transition , add new element; recommended react way detecting , reacting transitionend events?

my code far:

// jsx  let key = this.state.adding ? 'addform' : 'addplaceholder';  <reactcsstransitiongroup transitionname="fade">   <div key={key}>     {this.state.adding ? this.renderform() : this.renderplaceholder()}   </div> </reactcsstransitiongroup>   // css  .fade-enter {   overflow: hidden;   opacity: 0.01; } .fade-enter.fade-enter-active {   opacity: 1;   transition: opacity .3s ease-in .3s; }  .fade-leave {   opacity: 1; } .fade-leave.fade-leave-active {   opacity: 0.01;   transition: opacity .3s ease-in; } 

it seem there no way achieve desired outcome using css.

since reactcsstransitiongroup intercepts low-level api animation life-cycle methods there no way detect end of animation when using it. remaining avenue using low-level api of reacttransitiongroup directly.

by wrapping children in component informs parent container when life-cycle methods called parent can delay adding new component children until informed transition of leaving child has completed.

i have published react-css-transition-replace component, implements this, on github/npm under mit license.