ReactCSStransitionGroup 또는 ReactTransitionGroup을 사용하여 React JS에서 상태 비 저장 구성 요소를 아래로 밀어 내리는 방법?

Question

처음에는 display:none으로 설정되는 상태 비 저장 구성 요소를 부모 구성 요소 중 하나에서 상태가 변경된 후에 슬라이드하려는 경우 드롭 다운처럼 아래로 슬라이드하는 것처럼 보입니다. 나는 애니메이션 부분을 처음 접했고, 나는 밖으로 시도했다 this_link.

지금까지 Sandbox (https://codesandbox.io/s/0xrjp051pp)에서 시도한 내용.

누군가에게 도움을 줄 수 있습니까?

Answer 1

다음은 전환이 작동하는 수정 된 샌드 박스입니다. https://codesandbox.io/s/nrz8vlmrrl 수정해야 할 유일한 점은 CSS 코드가 원하는대로 작동하도록하는 것입니다.

변경 한 내용은 다음과 같습니다.

1. CSS에서 전환 클래스를 변경하여 구성 요소를 표시했습니다. 이전에는 아무 것도 없었습니다.
2. 구성 요소에 전달했지만 사용하지 않는 소품을 기반으로 구성 요소 표시 및 숨기기 SubComponent.