Почему не вешается класс через js?

Question

[Night_Harpy]

https://codepen.io/colada/pen/poENoLK

Есть кнопка. Почему на неё не вешается класс. И как сделать анимацию, что бы при достижении scale(0.7), кнопка так же возвращалась к исходному положению?

Answer 1

[Вадим]

Не добавляется потому что нельзя в одном addEventListenerписать два события.
click touch

А анимацию с помощью @keyframes
css:

.active{
    animation-name: toggle;
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
}

@keyframes toggle{
  50% {transform: scale(0.7)}
  100% {transform: scale(1)}
}

js:

leftBtn.addEventListener('click', (evt) => {
    leftBtn.classList.add('active')
    setTimeout(()=>{
      leftBtn.classList.remove('active')
    }, 300)
})

Comments

[Вадим]

Night_Harpy, обновил ответ. Если решает поставленный вопрос - отметьте решением чтоб другие пользователи сервиса не тратили время зря.