我不明白为什么 CSS Transition 在 keydown 上不起作用

Question

我正在尝试制作向右和向左移动方块的动画。但我不明白为什么它不起作用。例如，它适用于点击事件。这是我的 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>

Answer 1

转换应该添加一次，这里是一个工作片段：

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 0.5s cubic-bezier(0, .7, 0, 1);
}

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

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

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

Answer 2

您的 cssCSS

中有两个 transition 实例

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

如果您希望在 margin-left 和 margin-top 之间有不同的过渡，您可以将它们组合起来。

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

Answer 3

如果你看看你写的css，

.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);
}

您有 2 个过渡属性，过渡属性被下一个过渡 margin-top 属性覆盖。

计算样式时，这就是 css 规则的样子。

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

因为您有相同类型的键，最后一条规则获胜，在 margin-top 的这个转换中，margin-left 的转换丢失。

因此，要么删除第二个转换规则，要么将其写为单个规则，属性将以逗号分隔。

我不明白为什么 CSS Transition 在 keydown 上不起作用

I can't understand why CSS Transition is not working on keydown

javascript

css

transition

keydown