javascript - css transition on class change 但不是悬停

Question

我想通过类更改(通过 js)为 html 元素的背景颜色设置动画。另一方面，同一元素的悬停效果不应动画化背景颜色的变化。

场景如下:

.cd-btn {
  background-color: $black;
  transition: background-color $colorChangeDuration ease;

  &:hover {
    background-color: $blue;
  }

  &.light-mode {
    background-color: $lightgrey;

    &:hover {
      background-color: $blue;
    }
  }
}

“light-mode”类通过 javascript 单击事件监听器与其他元素切换。

如何在类更改时保持背景颜色过渡，同时悬停时没有背景颜色过渡？

Answer 1

您可以避免悬停时的过渡。

在悬停时也更难避免它。这是请求吗？

function toggle() {
    var ele = document.getElementById('test');
    ele.classList.toggle ("alt");
}

.test {
    height: 80px;
    color: white;
    background-color: black;
    transition: 2s background-color;
}    

.test.alt {
    background-color: gray;
}

.test:hover {
    background-color: blue;
    transition: none;
}

<div class="test" id="test" >TEST</div>
<button onclick="toggle();">CHANGE</button>

如果你还想要没有过渡的悬停，你需要一个 JS 解决方案。

一种可能性是在超时后移动过渡类

function toggle() {
    var ele = document.getElementById('test');
    ele.classList.toggle ("alt");
    ele.classList.add ("trans");
    window.setTimeout (notrans, 2000);
}

function notrans() {
    var ele = document.getElementById('test');
    ele.classList.remove ("trans");
}

.test {
    height: 80px;
    color: white;
    background-color: black;
}    

.test.alt {
    background-color: gray;
}

.test:hover {
    background-color: blue;
}

.trans {
    transition: 2s background-color;
}

<div class="test" id="test" >TEST</div>
<button onclick="toggle();">CHANGE</button>