React Transition Group으로 더 많은 애니메이션 미리보기 및 보기

Preview & View More 구성 요소가 다른 레이아웃 애니메이션의 미리 보기 및 보기에 React Transition Group 사용.

높은 수준에서 시도할 수 있는 CSS 애니메이션의 여러 가지 방법을 생각할 수 있습니다. 이 블로그에서는 Preview 및 View More 구성 요소가 다른 Preview 및 View More 종류의 레이아웃에 대해 이야기합니다.
Expanded content 속성에 애니메이션을 적용할 것이기 때문에 Collapsed content 및 max-height의 대략적인 높이를 미리 알고 있어야 합니다.

이제 축소 단계에서 Expanded content를 Collapsed content로 교체하면 버벅거림과 함께 갑자기 발생합니다. 이 문제를 해결하려면 다음과 같은 애니메이션 전략을 채택해야 합니다.

확장 단계 중

Collapsed content를 Expanded content로 바꿉니다.

확장된 내용을 수용하기 위해 높이 애니메이션

붕괴 단계 동안

높이를 Collapsed content 높이로 애니메이션합니다. 이것은 Expanded content가 Collapsed content보다 더 크고 갑작스럽게 줄어들지 않고 높이 변화를 수용할 수 있기 때문입니다

.

애니메이션이 끝나면 Expanded content를 Collapsed content로 바꿉니다

.

이를 달성하기 위해 CSSTransition의 react-transition-group 모듈을 사용합니다.

다음과 같은 접힌 콘텐츠 구성요소가 있다고 가정해 보겠습니다.

const CollapsedContent = (props) => {
  return (
    <div className="collapsed">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>
        Asperiores iste magnam dolores eius ab laboriosam excepturi, consectetur
        consequuntur maiores at voluptas ipsam cum reiciendis assumenda tenetur
        natus in omnis deleniti.
      </p>
    </div>
  );
};

그리고 다음 확장 콘텐츠 구성 요소

const ExpandedContent = (props) => {
  return (
    <div className="expanded">
      <p>
        It is a long established fact that a reader will be distracted by the
        readable content of a page when looking at its layout. The point of
        using Lorem Ipsum is that it has a more-or-less normal distribution of
        letters, as opposed to using 'Content here, content here', making it
        look like readable English.
      </p>
      <p>
        There are many variations of passages of Lorem Ipsum available, but the
        majority have suffered alteration in some form, by injected humour, or
        randomised words which don't look even slightly believable.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores iste
        magnam dolores eius ab laboriosam excepturi, consectetur consequuntur
        maiores at voluptas ipsam cum reiciendis assumenda tenetur natus in
        omnis deleniti.
      </p>
    </div>
  );
};

기본 또는 오케스트레이션 구성 요소에서 2개의 부울을 추가해야 합니다.

isCollapsed(렌더링할 구성 요소를 추적하기 위해)

isAnimating(애니메이션 실행 시기 추적)

따라서 애니메이션이 시작되면 isCollapsed를 false로 전환하고 애니메이션이 끝나면 isCollapsed를 true로 전환합니다.

이렇게 하면 위에서 언급한 전략에 따라 애니메이션을 만들 수 있습니다.

주성분

export const Main = () => {
  const [isCollapsed, setIsCollapsed] = useState(true);
  const [isAnimating, setIsAnimating] = useState(false);

  return (
    <div>
      <div className="card">
        <CSSTransition
          in={isAnimating}
          timeout={200}
          classNames="content-switching"
          onEntering={() => {
            setIsCollapsed(false);
          }}
          onExited={() => {
            setIsCollapsed(true);
          }}
        >
          <div className="base">
            {isCollapsed && <CollapsedContent />}
            {!isCollapsed && <ExpandedContent />}
          </div>
        </CSSTransition>
      </div>
      <button
        onClick={() => setIsAnimating((prev) => !prev)}
        style={{ display: "block" }}
      >
        {isCollapsed ? "Show" : "Hide"}
      </button>
    </div>
  );
};

여기서 볼 수 있듯이 사용자가 Show 또는 Hide 버튼을 클릭하면 isAnimating 플래그만 토글됩니다.

그런 다음 CSSTransition 구성 요소는 수명 주기 메서드( isCollapsed 및 onEntering )를 기반으로 onExited 플래그 전환을 처리합니다.

완성된 결과:

전체 소스 코드는 여기에서 확인할 수 있습니다.

github.com/rohanBagchi/react-height-animation-tryout


여기까지 읽어주셔서 감사합니다.