Skip to content

Transition of popup doesn't work when uses this package. #229

Description

@hc0503

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    staleStale issue with no response or lack of info

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions