Slide Transition

import React, { useState } from 'react';

type Direction = 'left' | 'right' | 'top' | 'bottom';

export const SlideTransition = () => {
  const [isVisible, setIsVisible] = useState(true);
  const [direction, setDirection] = useState<Direction>('left');

  return (
    <div className="transition-demo">
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? '숨기기' : '보이기'}
      </button>
      <div className={`slide-transition slide-transition-${direction} ${isVisible ? 'slide-transition-visible' : ''}`}>
        <div className="transition-content">
          <h3>Slide Transition</h3>
          <p>{direction} 방향에서 슬라이드</p>
        </div>
      </div>
    </div>
  );
};

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

.slide-transition-left {
  transform: translateX(-100px);
}

.slide-transition-left.slide-transition-visible {
  opacity: 1;
  transform: translateX(0);
}