Как запустить анимацию с помощью клавиш Keydown ArrowUp и ArrowDown? ⇐ Javascript

[Anonymous]

У меня этот код отлично работает с перетаскиванием и щелчком мыши, но мне просто нужно запустить анимацию кнопок вверх/вниз на клавиатуре, действующих как mousedown/mouseup.
Чего мне нужно достичь, чтобы добавить функцию/функцию, как показано ниже, но у меня возникла проблема: я понятия не имею, как добиться триггера. Искал документацию, в которой кратко изложено «решение», подобное этому.

Код: Выделить всё

window.addEventListener("keydown", (e) => {
if (e.key === "ArrowUp") {
//some code to run the animation
} else if (e.key === "ArrowDown") {
//some code to run the animation
}
});

Вот частичный код из исходного кода, по которому я могу сказать, где происходит «анимация».

Код: Выделить всё

class Grab {
constructor({
indexSize,
onIndexChange,
onGrabStart,
onGrabMove,
onGrabEnd
}) {
this.onGrabEnd = onGrabEnd;
this.onGrabStart = onGrabStart;
this.onGrabMove = onGrabMove;

this.scroll = {
start: 0,
current: 0,
initial: 0
};

this.listen("mousedown", this.onMouseDown.bind(this));
this.listen("mousemove", this.onMouseMove.bind(this));
this.listen("mouseup", this.onMouseUp.bind(this));

this.listen("touchstart", this.onMouseDown.bind(this), true);
this.listen("touchmove", this.onMouseMove.bind(this), true);

this.listen(["touchend", "touchcancel"], this.onMouseUp.bind(this), true);

}
listen(events, grabListener, isTouch) {
let mouseListener = function (ev) {
if (ev.type === "mouseout" && ev.relatedTarget != null) return;
grabListener({
y: ev.clientY
});
};

let touchListener = function (ev) {
// if (ev.type === "touchend") {
//   throw new Error(ev.targetTouches);
// }
ev.preventDefault();
grabListener({
y: ev.targetTouches[0] ? ev.targetTouches[0].clientY : null
});
};
let listener = mouseListener;
if (isTouch) {
listener = touchListener;
}
if (Array.isArray(events)) {
for (let i = 0; i < events.length; i++) {
window.addEventListener(events[i], listener, false);
}
} else {
window.addEventListener(events, listener, false);
}
}

onMouseDown(position) {
this.scroll.inital = this.scroll.current;

this.scroll.start = position.y;
this.scroll.current = position.y;
this.scroll.delta = this.scroll.current - this.scroll.start;

this.onGrabStart({
delta: this.scroll.delta,
direction: Math.abs(this.scroll.delta),
current: this.scroll.current,
start: this.scroll.start
});
}
onMouseMove(position) {
if (this.scroll.start) {
this.scroll.current = position.y;
this.scroll.delta = this.scroll.current - this.scroll.start;

this.onGrabMove({
delta: this.scroll.delta,
direction: Math.abs(this.scroll.delta),
current: this.scroll.current,
start: this.scroll.start
});
}
}
onMouseUp() {
if (this.scroll.start) {
this.onGrabEnd({
delta: this.scroll.delta,
direction: Math.abs(this.scroll.delta),
current: this.scroll.current,
start: this.scroll.start
});

this.scroll.start = null;
this.scroll.current = null;
this.scroll.delta = null;
}
}
}

export {
Grab
};

Краткое описание: мне нужна анимация «захвата», запускаемая стрелкой вверх/вниз.
Любая идея, которую вы могли бы предложить, будет очень признательна.

Подробнее здесь: https://stackoverflow.com/questions/797 ... -arrowdown