JS - 바닐라js로 FadeIn, FadeOut 기능 구현

2025. 3. 16. 22:13

바닐라 JavaScript만을 사용하여 fadeIn과 fadeOut 기능을 구현하고, 각 기능이 끝나면 콜백 함수가 실행되는 코드.

바닐라js로 FadeIn, FadeOut 기능 구현

바닐라js로 FadeIn, FadeOut 기능 구현

1. HTML 구조

2. JavaScript 구현

3. 동작설명

4. 설명

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

HTML 구조

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: #3498db;
      opacity: 0; /* 초기 상태: 투명 */
      transition: opacity 0.5s ease; /* 부드러운 전환 효과 */
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <button onclick="fadeIn(() => console.log('Fade In 완료!'))">Fade In</button>
  <button onclick="fadeOut(() => console.log('Fade Out 완료!'))">Fade Out</button>

  <script src="script.js"></script>
</body>
</html>

#box 요소는 초기에 투명(opacity: 0) 상태로 시작합니다.
transition 속성을 사용해 opacity가 부드럽게 변경되도록 설정합니다.
fadeIn과 fadeOut 버튼을 클릭하면 각 기능이 실행되고, 콜백 함수가 호출됩니다.

JavaScript 구현

// script.js

// Fade In 기능
function fadeIn(callback) {
  const box = document.getElementById('box');
  box.style.opacity = 1; // opacity를 1로 변경 (불투명)

  // transition이 끝나면 콜백 실행
  box.addEventListener('transitionend', () => {
    if (callback) callback();
  }, { once: true }); // 한 번만 실행
}

// Fade Out 기능
function fadeOut(callback) {
  const box = document.getElementById('box');
  box.style.opacity = 0; // opacity를 0로 변경 (투명)

  // transition이 끝나면 콜백 실행
  box.addEventListener('transitionend', () => {
    if (callback) callback();
  }, { once: true }); // 한 번만 실행
}

1. FadeIn 함수

box의 opacity를 1로 변경하여 요소를 서서히 나타나게 합니다.
transitionend 이벤트를 사용해 전환이 끝나면 콜백 함수를 실행합니다.
{ once: true } 옵션을 사용해 이벤트 리스너가 한 번만 실행되도록 합니다.

2. FadeOut 함수

box의 opacity를 0로 변경하여 요소를 서서히 사라지게 합니다.
transitionend 이벤트를 사용해 전환이 끝나면 콜백 함수를 실행합니다.

동작설명

1. Fade In 기능

"Fade In" 버튼을 클릭하면 #box가 서서히 나타납니다.
전환이 완료되면 콘솔에 "Fade In 완료!"가 출력됩니다.

2. Fade Out 기능

"Fade Out" 버튼을 클릭하면 #box가 서서히 사라집니다.
전환이 완료되면 콘솔에 "Fade Out 완료!"가 출력됩니다.

결론

이 예제는 바닐라 JavaScript만을 사용하여 fadeIn과 fadeOut 기능을 구현하고, 전환이 끝나면 콜백 함수를 실행하는 방법을 보여줍니다. transitionend 이벤트를 활용해 전환 완료 시점을 정확히 감지할 수 있습니다.

저작자표시 비영리 변경금지

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

JS - 바닐라js로 hover 기능 구현 (0)	2025.03.16
JS - 바닐라js로 slideToggle 기능 구현 (0)	2025.03.16
JS - var 선언과 호이스팅(Hoisting) (0)	2025.03.16
CSS 변수(Custom Properties) 활용법 (0)	2025.03.16
JS - 자바스크립트(javascript) 만으로 font (폰트) CSS 속성 조작하기 (0)	2022.05.03

열공의 기록