Why does a transition apply when the class is removed?

Question

Here is an example of my problem

I have an div and a button. Each time the button is clicked, the div changes it's background-color to a random color.

button.addEventListener('click', function(e){
    e.preventDefault();
    setRandomColor();
});

By default the the div has a class called transition-on which applies a transition to the background-color.

<div class="block transition-on"></div>
<button>Change</button>

CSS:

.transition-on {
  transition: background-color 0.5s
}

If I remove this class before I apply the random background-color then reapply the class after, the transition will still apply.

My intention is to remove the transition temporarily when I apply the random color.

button.addEventListener('click', function(e){
    e.preventDefault();
    block.classList.remove('transition-on');
    setRandomColor();
    block.classList.add('transition-on');
});

Does anybody know why this may be happening?

EDIT:

Referring to the answer by @ths - Using a setTimeout does produce the result that I need but now I am wondering why is it necessary to use a timeout.

Is a timeout really required to temporarily disable a css transition?

• Remove the transition class
• Apply the color to the block
• Add the transition class back

This should logically change the color without a transition

Answer 1

remove the "transition-on" class from the id="remove_trans" element:

  function changecolor()
    {
//add this code 
       var element = document.getElementById("remove_trans");

       element.classList.remove("transition-on");
        setRandomColor();
        element.classList.add('transition-on');
     }

    changecolor();

html

div id="remove_trans" class="block transition-on"></div>
<button onClick="changecolor()">Change</button>

In html tag add the id attribute

Answer 2

As I understood, you want to change the background-color dynamically using JavaScript without seeing any transition. To do so you need to put the expression that adds the transition-on class to the div element in setTimeout method and by passing the transition-duration to the second argument(in your case the transition-duration equals 0.5s).

Here's a runnable snippet to illustrate:

var block = document.querySelector('.block');
var button = document.querySelector('button');

function setRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  block.style.backgroundColor = color;
}

button.addEventListener('click', function(e){
  e.preventDefault();
  block.classList.remove('transition-on');
  setRandomColor();
  // the next line executes after 500 ms, thus the div element gets the transition-on class after 500 ms and no transition will happen.
  setTimeout(function() {
    block.classList.add('transition-on');
  }, 500); // 500 ms = 0.5 s => the transition-duration of the transition-on class
});
setRandomColor();

.block {
  width: 40px;
  height: 40px;
}
.transition-on {
  transition: background-color 0.5s
}

<div class="block transition-on"></div>
<button>Change</button>