Scale Transition

import React, { useState } from 'react';

type ScaleType = 'grow' | 'shrink' | 'zoom';

export const ScaleTransition = () => {
  const [isVisible, setIsVisible] = useState(true);
  const [scaleType, setScaleType] = useState<ScaleType>('grow');

  return (
    <div className="transition-demo">
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? '숨기기' : '보이기'}
      </button>
      <div className={`scale-transition scale-transition-${scaleType} ${isVisible ? 'scale-transition-visible' : ''}`}>
        <div className="transition-content">
          <h3>Scale Transition</h3>
          <p>{scaleType} 효과로 변환</p>
        </div>
      </div>
    </div>
  );
};

.scale-transition {
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-transition-grow {
  transform: scale(0);
}

.scale-transition-grow.scale-transition-visible {
  opacity: 1;
  transform: scale(1);
}