It is working as my modalOverlay gets mounted and unmounted based on the state props.show it recieves from parent. but the transitions are not happening. I want modalOverlay to have opacity of 0 to 0.9 and some transition as well. I checked on inspect element the classes like my-node-enter my-node-enter-active and others do get added. then why am I not getting the opacity reduced and transitions. Please Help

const ModalOverlay=(props)=>{

    const clickHandler=()=>{
        props.closeModal();
    }
    


    return(
        <>
            <CSSTransition
            mountOnEnter
            unmountOnExit
            in={props.show}
            timeout={200}
            classNames="my-node">
            <div className={classes.modalOverlay}>
                <div className={classes.closeModal}>
                    <div className={classes.closeButton} onClick={clickHandler}>
                                    
                    </div>
                </div>
                <div className={classes.options}></div>
                <div className={classes.contactUs}></div> 
            </div>
            </CSSTransition>
            
        </>
    )
}

export default ModalOverlay

Here's the css

.modalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    background: rgb(0, 0, 0); /* Just to visualize the extent */
    /* opacity: 0.9; */
    height: 100vh;
    display: flex;
    flex-direction: column;
    
    
  }

  .closeModal{
      
      background-color: aqua;
      width: 100%;
      height: 10%;
  }
  .options{
    background-color: bisque;
    width: 100%;
    height: 60%;
}
.contactUs{
   background-color: rgb(255, 66, 66);
    width: 100%;
    height: 30%;
}

.closeButton{
    margin-right: 15px;
    
}

  .fade-in-enter{
    opacity: 0;
  }
  .fade-in-enter-active{
    opacity: 1;
    transition: opacity 200ms;
  }
  .fade-in-exit{
    opacity: 1;
  }
  .fade-in-exit-active{
    opacity: 0;
    transition: opacity 200ms;
  }

  .my-node-enter {
    opacity: 0;
  }
  .my-node-enter-active {
    opacity: 1;
    transition: opacity 200ms;
  }
  .my-node-exit {
    opacity: 1;
  }
  .my-node-exit-active {
    opacity: 0;
    transition: opacity 200ms;
  }

CodePudding user response：

For the fade in, I think that the problem might be that the transition property is set at the same time as opacity 1. Try adding the transition property on .modalOverlay instead.

I do not know what library you are using for this modal, but a common problem trying to get a component to fade out when it unmounts is that it unmounts immediately, not leaving any time to see the transition occur.

CodePudding user response：

the syntax to add classes from module css files is different. the solution is mentioned here: (React) CSSTransition with css modules