CSSトランジションがKeyDownイベントで動作していない理由を私は理解できません

ヤロスラフTereshchuk：

私は右に、左にブロックを移動するためのアニメーションを作るしようとしています。それは働いていない理由を私は理解することはできません。例えば、それは、クリックイベントに適しています。ここに私のあるcodepenが。感謝

const box = document.getElementsByClassName('box')[0];

document.addEventListener('keydown', function({
  keyCode,
  which
}) {
  const keycode = keyCode ? keyCode : which;
  switch (keycode) {
    case (39):
      box.classList.add('move-right');
      box.classList.remove('move-left');
      break;
    case (37):
      box.classList.add('move-left');
      box.classList.remove('move-right');
      break;
  }
});

.box {
  background-color: gray;
  height: 100px;
  width: 100px;
  transition: margin-left 0.5s cubic-bezier(0, .7, 0, 1);
  transition: margin-top 0.5s cubic-bezier(0, .7, 0, 1);
}

.move-right {
  margin-left: 400px;
}

.move-left {
  margin-left: 0px;
}

<div class="box"></div>

Koralarts：

あなたは、2つのインスタンスを持っているtransitionあなたのcssCSSに

.box {
  ...
  transition: margin-left 0.5s cubic-bezier(0, .7, 0, 1);
  transition: margin-top 0.5s cubic-bezier(0, .7, 0, 1);
}

あなたは、具体的マージン左マージントップの間で異なる遷移を持ちたい場合は、それらを組み合わせることができます。

.box {
  ...
  transition: margin-left 0.5s cubic-bezier(0, .7, 0, 1), margin-top 0.5s cubic-bezier(0, .7, 0, 1);
}