reactjs - CSSTransitionGroup component doesn't leave properly -

i'm trying create modal logging in mask fades in when click login button , fades out when close it. decided 'react-transition-group' library implementing that. fading in works fine, fades out right away, without animation being applied. how can make work?

connected component:

<div>                 <modalroot {...this.props}>                     <grid>                         <menu {...this.props}/>                         <div classname='wrapper'>                             <div classname='content'>                                 <form posttodo={this.props.posttodo}/>                                 <ul classname='todo-list'>                                    <csstransitiongroup                                     transitionname='todo'                                     transitionentertimeout={500}                                     transitionleavetimeout={300}>                                         {todoitems}                                     </csstransitiongroup>                                     </ul>                             </div>                         </div>                     </grid>                 </modalroot>              </div> 

modalroot:

const modal_components = {   login_modal: loginmodal,   /* other modals */ };  const modalroot = (props: any) => {     const {isvisible, ismaskshown, window} = props.modal;     const modal = modal_components[window];     if(!isvisible) {       return (         <div>           {props.children}         </div>       );     }     if(ismaskshown) {       return (         <csstransitiongroup           transitionname='mask'           transitionappear={true}           transitionappeartimeout={500}           transitionentertimeout={0}           transitionleavetimeout={300}>             <mask>               <modal key={100} hidemodal={props.hidemodal} />                 {props.children}             </mask>         </csstransitiongroup>       );     }     if(!ismaskshown) {       return (         <div>           <modal hidemodal={props.hidemodal}/>           {props.children}         </div>         );     } }; 

loginmodal:

const loginmodal = ({hidemodal,presets}) => {      return (         <div classname='login-modal'>             <button onclick={hidemodal} classname='close'>x</button>         </div>     ); }; 

css:

 .mask {     position: absolute;     width: 100%;     height: 100%;     background: black;     opacity: 0.75; }  .mask-leave {   opacity: 0.75; }    .mask-leave.mask-leave-active {   opacity: 0;   transition: opacity 300ms ease-in; }  .mask-appear {   opacity: 0; }  .mask-appear.mask-appear-active {   opacity: 0.75;   transition: opacity .5s ease-in; } 

<csstransitiongroup> handles animating mounting , unmounting of components that children of <csstransitiongroup> component. aren't supposed mount or unmount <csstransitiongroup> itself, you're supposed mount or unmount children.

the reason fades in doesn't fade out because you've specified prop transitionappear={true}, causes <csstransitiongroup> render "appear" animation when first mounts. but, when ismaskshown variable goes true false, consider happens inside of render function: <csstransitiongroup> instantly unmounted, without chance animate "leaving" transition, because - once again - <csstransitiongroup> animates components directly inside of it.

the solution mount <csstransitiongroup> once, keep static, , conditionally render children. it's hard tell code component trying animate in , out, can't give direct solution. keep in mind explanation , should able figure out.