Fade Transition

쉬움

부드럽게 나타나고 사라지는 페이드 전환 효과

#animation#smooth#css-only

라이브 데모

✨

Fade Transition

부드럽게 나타나고 사라지는 효과

코드

FadeTransition.tsx

import React, { useState } from 'react';

export const FadeTransition = () => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div className="transition-demo">
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? '숨기기' : '보이기'}
      </button>
      <div className={`fade-transition ${isVisible ? 'fade-transition-visible' : ''}`}>
        <div className="transition-content">
          <h3>Fade Transition</h3>
          <p>부드럽게 나타나고 사라지는 효과</p>
        </div>
      </div>
    </div>
  );
};

transitions.css

.fade-transition {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.fade-transition-visible {
  opacity: 1;
}