我不明白为啥 CSS 转换在 keydown 上不起作用 [重复]

Posted 2023-03-06

【中文标题】我不明白为啥 CSS 转换在 keydown 上不起作用 [重复]

【英文标题】：I can't understand why CSS Transition is not working on keydown [duplicate]我不明白为什么 CSS 转换在 keydown 上不起作用 [重复]

【发布时间】：2020-07-02 14:24:24

【问题描述】：

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

【问题讨论】：

使用transition: margin 0.5s ...;

它适用于margin-left，我只是想为margin 使用，而不是添加所有边距属性。

【参考方案1】：

transition 应该添加一次，这里是一个有效的 sn-p：

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>

【参考方案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);

如果你想在左边距和顶部边距之间特别有不同的过渡，你可以将它们组合起来。

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

【参考方案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 的转换丢失。

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