Collapse Transition

보통

높이가 부드럽게 변하는 접기/펼치기 전환 효과

#animation#smooth#javascript

라이브 데모

📦

Collapse Transition

높이가 부드럽게 변하는 효과

아코디언이나 드롭다운 메뉴에 자주 사용됩니다.

컨텐츠가 많을 때도 자연스럽게 펼쳐집니다.

코드

CollapseTransition.tsx

import React, { useState, useRef, useEffect } from 'react';

export const CollapseTransition = () => {
  const [isExpanded, setIsExpanded] = useState(true);
  const contentRef = useRef<HTMLDivElement>(null);
  const [height, setHeight] = useState<number | undefined>(undefined);

  useEffect(() => {
    if (contentRef.current) {
      setHeight(contentRef.current.scrollHeight);
    }
  }, []);

  return (
    <div className="transition-demo">
      <button onClick={() => setIsExpanded(!isExpanded)}>
        {isExpanded ? '접기' : '펼치기'}
      </button>
      <div
        className={`collapse-transition ${isExpanded ? 'collapse-transition-expanded' : ''}`}
        style={{ maxHeight: isExpanded ? `${height}px` : '0px' }}
      >
        <div ref={contentRef} className="collapse-transition-content">
          <h3>Collapse Transition</h3>
          <p>높이가 부드럽게 변하는 효과</p>
        </div>
      </div>
    </div>
  );
};

transitions.css

.collapse-transition {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapse-transition-expanded {
  overflow: visible;
}