[책] 자바스크립트 코드 레시피 278 - 160일차

CSS Transition, CSS Animations 사용하기

• CSS 애니메이션 타이밍에 맞춰 작업을 처리하고 싶을 때

설명

버튼을 클릭하면 요소의 state-show 클래스 포함 여부를 확인합니다. false의 경우 해당 클래스를 추가합니다. true의 경우 해당 클래스를 제거함으로써 요소의 상태를 전환합니다.

실습

index.html

<div class="box"></div>
<button class="button">버튼</button>

---

style.css

.box {
  width: 100px;
  height: 200px;
  background-color: #00ffff;
  transition: width 0.5s ease;
}

.box.state-show {
  width: 1000px;
}

---

script.js

const button = document.querySelector('.button');
button.addEventListener('click', handleClick);
function handleClick() {
  const element = document.querySelector('.box');
  console.log(element.classList.contains('state-show'));
  if (element.classList.contains('state-show') === false) {
    element.classList.add('state-show');
  } else {
    element.classList.remove('state-show');
  }
}