This is my comment modal style.
.commentModal {
background-color : var (--theme-chapter-toolbar-bg-color );
position : fixed ;
top : 62px ;
right : 5px ;
width : 400px ;
bottom : 5px ;
box-shadow : -2px 1px 9px 0px rgb (85 85 85 / 13% );
padding : 30px ;
border : 1px solid var (--theme-chapter-toolbar-border-color );
border-radius : 5px ;
z-index : 3 ;
transition : all 0.3s ease-in-out ;
& :global (.comment-modal-enter ) {
transform :translateX (100% );
}
& :global(.comment-modal-enter-active ) {
transform :translateX (0 );
}
& :global(.comment-modal-exit ) {
transform :translateX (0 );
}
& :global(.comment-modal-exit-active ) {
transform :translateX (100% );
}
}
This is code to show comment modal using CSSTransition.
< CSSTransition
in = { showCommentModal }
timeout = { 300 }
classNames = "comment-modal"
unmountOnExit
>
< CommentModal
onCloseClick = { ( ) => setShowCommentModal ( false ) }
/>
</ CSSTransition >
When the modal has react-dropdown-select, the screenshot is following.
The opening transition doesn't work now.
2022-03-23_23-57-54.mp4
But if I remove react-dropdown-select in modal, the transition works well.
2022-03-24_00-02-46.mp4
This is my comment modal style.
This is code to show comment modal using CSSTransition.
When the modal has react-dropdown-select, the screenshot is following.
The opening transition doesn't work now.
2022-03-23_23-57-54.mp4
But if I remove react-dropdown-select in modal, the transition works well.
2022-03-24_00-02-46.mp4