为什么删除类时会应用转换？ [复制]

Question

Here is an example of my problem

我有一个div 和一个button。每次单击按钮时，div 会将其 background-color 更改为随机颜色。

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

默认情况下，div 有一个名为transition-on 的类，它将转换应用于background-color。

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

CSS：

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

如果我在应用随机 background-color 之前删除该类，然后重新应用该类，则转换仍然适用。

我的目的是在应用随机颜色时暂时移除过渡。

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

有人知道为什么会这样吗？

编辑：

参考@ths 的答案-使用setTimeout 确实会产生我需要的结果，但现在我想知道为什么需要使用超时。

真的需要超时来临时禁用 CSS 转换吗？

• 移除过渡类
• 将颜色应用于块
• 重新添加过渡类

这应该在没有过渡的情况下从逻辑上改变颜色

Answer 1

从 id="remove_trans" 元素中移除“transition-on”类：

  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>

在html标签中添加id属性

Answer 2

据我了解，您想使用JavaScript 动态更改background-color 而不会看到任何转换。为此，您需要将添加transition-on 类的表达式添加到setTimeout 方法中的div 元素，并将transition-duration 传递给第二个参数（在您的情况下，transition-duration 等于0.5s） .

这里有一个可运行的 sn-p 来说明：

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>