css transition on class change but not on hover

Question

I wanna animate the background-color of an html element by class change (via js). The hover effect of the same element on the other hand shouldn't animate the change of the background-color.

Here is the scenario:

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

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

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

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

The class 'light-mode' toggles with a other element with a javascript click event listener.

How can I keep the background-color transition on class change meanwhile there is no background-color transition on hover?

Answer 1

You can avoid transition on hover.

It's more difficult to avoid it also on unhover. Is this a request ?

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>

I you want also the unhover without transition, you need a JS solution for this.

One posibility would be to meove the transition class after a timeout

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

I'm not sure I understand the question.

Here is the code working with hover

.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>

Here is the transition working on click instead of on hover:

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>

Answer 3

The simple solution to this is to create a seperate class for just the transition:

.trans {
    transition: .5s ease all;
}

Then use jQuery with the mouseenter / mouseleave events to apply the class, adding the transition effect duration as the amount of a delay on the mouseleave event, before reinstating the transition on the element.

$(document).on ('mouseenter', '.scrollToTop', function() {
    $(this).removeClass ('trans');
});
$(document).on ('mouseleave', '.scrollToTop', function(e) {
    setTimeout (function (e) {
        $('.scrollToTop').addClass ('trans');
    }, 500);
});

As long as the duration is > 0 then you get no transition effect; as the class state is already changed back prior to the class being added back to the dom (.5 of a second later, the duration of the transition effect).