ReactJS Tabler/Bootstrap의 모달 전환

Question

일부 ReactJS 구성 요소를 사용하여 Tabler 대시보드를 구축하고 있습니다. 처음에는 일반 HTML 페이지와 Jinja2 템플릿을 사용했지만 일부 구성 요소에 대해 ReactJS를 구현하기 시작했습니다.

저는 실제로 필요하지 않은 추가 패키지를 많이 생성하기 때문에 React-tabler 또는 bootstrap-tabler와 같은 타사 도구를 너무 많이 사용하고 싶지 않습니다. 이러한 패키지 없이도 ReactJS 구성 요소를 사용하여 아름다운 Tabler 대시보드를 만들 수 있었습니다.

지금 내가 가진 유일한 문제는 모달을 표시하는 것입니다... 이제 이것은 작동하지만 CSS 전환은 작동하지 않습니다. 적어도 처음에는 그렇지 않았습니다. 나는 다음과 같이 작동하게 만듭니다:

으아아아

사실 저는 이런 걸 별로 안 좋아해요. 좀 클리셰적인 느낌이 드네요.

모달 표시는 훌륭하게 작동합니다. 먼저 style="display:block 属性，然后添加 show 类。这样我就可以在没有太多额外 JavaScript 或其他内容的情况下工作。但是 display:block 必须设置首先，如果没有，它们似乎是同时设置的，或者可能是 display:block를 추가하고 나중에 설정하면 전환이 표시되지 않습니다.

다음 이벤트 목록을 추가하려고 modalRef.current.addEventListener("transitionend", handleTransitionEnd);했지만 이는 스타일 변경에는 적용되지 않고 실제 변환에만 적용되는 것 같습니다.

100ms 시간 초과보다 더 깔끔한 방법이 있나요? 기본적으로 display:block를 추가할 수 없는 것 같습니다. 그러면 내 앱 위에 있는 투명도 모드로 인해 내 앱에 액세스할 수 없게 되기 때문입니다.

Answer 1

지금은 이렇게 고치고 있습니다. 나는 useEffect를 두 번 사용했는데, 이는 "show" 클래스가 display:block 스타일과 동시에 추가되는 것을 방지하기 위한 것입니다.

모달을 닫으려면 실제로 transitionend 이벤트 리스너를 사용할 수 있습니다.

으아아아