Как по нажатию той же кнопки сделать второе событие в JavaScript

Question

При нажатии на кнопку, добавляется к классу .header класс .open. Как по повторному нажатию на кнопку добавлять другой класс (в моем случае .close).

document.addEventListener("DOMContentLoaded", function(){
    document.getElementById("burger").addEventListener("click", function(){
        document.querySelector(".header").classList.toggle("open");  
    })
})

Answer 1

Насколько я понимаю, ты хочешь иметь два класса вместо одного ради анимации (ну или transition'а)? Вообще, есть другие способы сделать анимацию, но я всё же отвечу на вопрос, который ты задал - исходя из предположения, что тебе нужна анимация. В моём примере стрелка вращается всегда по часовой стрелке, а при одном классе получалось бы, что она возвращается в начальное положение против часовой. А про reflow можно почитать, например, тут.

var button = document.querySelector("button")

button.addEventListener('click', e => {
  var btn = e.target
  var cl = btn.classList
  
  if (cl.contains('open')) {
    cl.add('closed')
  } else {
    cl.add('open')
  }
  
  btn.disabled = true
})

button.addEventListener('transitionend', e => {
  var btn = e.target
  var cl = btn.classList

  if (cl.contains('closed')) {
    cl.add('disable-transitions')
    getComputedStyle(btn).width // force reflow
  
    cl.remove('closed')
    cl.remove('open')
    
    getComputedStyle(btn).width // force reflow
    cl.remove('disable-transitions')
  }
  
  btn.disabled = false
})

button {
  border-radius: 50%;
  border: 2px solid blue;
  background: antiquewhite;
  width: 3em;
  aspect-ratio: 1;
  
  transform: rotate(180deg);
  transition: transform 3s linear;
}

.open {
  transform: rotate(360deg);
}

.closed {
  transform: rotate(540deg);
}

.disable-transitions {
  transition: none !important;
}

<button>V</button>

БЛОГ НА HUSL

Как по нажатию той же кнопки сделать второе событие в JavaScript

Ответы (1 шт):