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

课程＆＃39; light-mode＆＃39;使用javascript click事件侦听器切换其他元素。

如何在班级变化的同时保持背景颜色过渡，同时悬停时没有背景颜色过渡？

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>

我还想要无需转换的unhover，你需要一个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>

Answer 2

我不确定我理解这个问题。

以下是使用悬停

的代码

.cd-btn {
  color: white;
  background-color: black;
  transition: background-color 0.5s ease;
}

.cd-btn:hover {
  background-color: blue;
}

.cd-btn.light-mode {
  background-color: lightgrey;
}

.cd-btn.light-mode:hover {
  background-color: blue;
}

<h1>Hover to toggle</h1>
<button type="button" class="cd-btn">Normal cd-btn</button>
<button type="button" class="cd-btn light-mode">Light cd-btn</button>

以下是点击而非悬停的转换：

function toggle(el) {
   el.classList.toggle('enable');
}

const elements = document.querySelectorAll('.cd-btn');

for (let el of elements) {
    el.addEventListener('click', () => toggle(el));
}

.cd-btn {
  color: white;
  background-color: black;
  transition: background-color 0.5s ease;
}

.cd-btn.light-mode {
  background-color: lightgrey;
}

.cd-btn.enable {
  background-color: blue;
}

<h1>Click to toggle</h1>
<button type="button" class="cd-btn">Normal cd-btn</button>
<button type="button" class="cd-btn light-mode">Light cd-btn</button>

班级变更时的css过渡而不是悬停

2 个答案: