Question

在下面的示例中，我想通过JS将pad的颜色更改为绿色，但也要使其处于活动状态时转换为黄色。

但是，通过JS pad.style.background = 'green'这样的颜色更改将使过渡停止工作。如果我删除此行，则过渡效果很好。

为什么会这样，我该如何解决？

let pad = document.getElementsByClassName('pad')[0]
pad.style.background = 'green'

.pad{
  width: 80px;
  height: 80px;
  background: black;
  transition: background .5s;
}
.pad:active {
  background: yellow;
}

<!DOCTYPE HTML>
    <body>
        <div class="pad"></div>
    </body>

Answer 1

似乎JS也向:active状态添加了绿色。将!important添加到CSS的活动样式中，使其更具优先级：

.pad:active {
    background: yellow!important;
}

Answer 2

不起作用的原因是因为pad.style.background将添加一个内联css样式，该样式优先于css类

解决方案：

使用类而不是下面的代码中的内联样式：

let pad = document.getElementsByClassName('pad')[0]
pad.classList.add("green");

.pad {
  width: 80px;
  height: 80px;
  background: black;
  transition: background .5s;
}

.pad.green {
  background: green;
}

.pad:active {
  background: yellow;
}

<div class="pad"></div>

Answer 3

之所以发生这种情况，是因为您通过在HTML元素上通过style属性应用样式来覆盖现有样式。

相反，您应该创建一个新类并使用JavaScript对其进行应用，在这种情况下，原始样式不会被覆盖，并且过渡效果仍然可以

将CSS设置为：

    .pad {
      width: 80px;
      height: 80px;
      background: black;
      transition: background .5s;
    }
    .pad:active {
      background: yellow;
    }

    .pad-green {
      background: green;
    }

然后在您的JavaScript中，执行以下操作：

let pad = document.getElementsByClassName('pad')[0]
pad.classList.add('pad-green')

希望有帮助，如果有任何疑问，请在评论中告诉我。

通过JS覆盖过渡的CSS属性使过渡停止工作

3 个答案: