Как убрать класс после изменения свойств?

Question

[Jomm]

Я сделал кнопку по которой когда я нажимаю она двигается по оси Z в одну сторону а когда отпускаю то она двигается в другую.

<div class="container">
    <div class="button">Button</div>
</div>

.container
{
    width: 265px;
    height: 45px; 
    perspective: 500px;
}
.button
{
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: red;
    transition: 0.1s linear;
}
.move
{
    transform: translateZ(-50px);
}

var button = document.querySelector('.button');
button.addEventListener('mousedown', e => {
	button.classList.add('move');
});
button.addEventListener('mouseup', e => {
	button.classList.remove('move');
});

Но проблема в том что когда я рано отпускаю кнопку то класс убирается сразу и моя "анимация" прерывается.

Comments

[Сергей Сергей]

можно через throttle с обязательным выполнением последнего вызова делать.

const reclass = throttle( (el, b) => b? el.classList.add( 'move' ): el.classList.remove( 'move' ), 100 );
button.addEventListener('mousedown', e => {
  reclass( button, true )
});
button.addEventListener('mouseup', e => {
  reclass( button, false );
});

как-то так.

[Jomm]

Сергей Сергей, Выдает ошибку "throttle is not defined"

[Сергей Сергей]

Jomm, эту функцию надо ещё найти в интернете, почитать, зачем она нужна и как работает, а потом применить.

[Jomm]

Сергей Сергей, Спасибо! Как отметить ваш комментарий решением?