Javascript 移除类时为什么要应用转换？

我有一个

div

和一个

按钮

。每次单击按钮时，

div

将其

背景色

更改为随机颜色

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

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

默认情况下，

div

有一个名为

transition on

的类，该类将转换应用于

背景色

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

如果在应用随机

背景色之前删除该类，然后在应用后重新应用该类，则转换仍将应用

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

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

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

有人知道为什么会这样吗

编辑：

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

临时禁用css转换真的需要超时吗


删除转换类
将颜色应用于块
重新添加转换类

这应该在逻辑上更改颜色而不进行转换
从id=“remove\u 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\u trans”class=“块转换打开”>
改变

在html标记中添加id属性
据我所知，您希望使用
JavaScript
动态更改
背景色
，而不会看到任何转换。为此，您需要在
setTimeout
方法中将
transition on
类添加到
div
元素的表达式，并将
transition duration
传递给第二个参数（在您的例子中，
transition duration
等于0.5s）

下面是一个可运行的片段来说明：


var block=document.querySelector（'.block'）；
var button=document.querySelector（'button'）；
函数setRandomColor（）{
变量字母='0123456789ABCDEF'；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
block.style.backgroundColor=颜色；
}
按钮。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
block.classList.remove（'transition-on'）；
setRandomColor（）；
//下一行在500毫秒后执行，因此div元素在500毫秒后获得类上的转换，并且不会发生转换。
setTimeout（函数（）{
block.classList.add（'transition-on'）；
}，500）；//500毫秒=0.5秒=>类上转换的转换持续时间
});
setRandomColor（）
.block{
宽度：40px；
高度：40px；
}
.过渡到{
过渡：背景色0.5s
}

更改
在再次添加类时，而不是在删除类时应用转换it@Jackson查看我的答案，它可能会帮助您。超时并不是禁用转换，超时会在您添加类之前使颜色发生更改，因此您向元素添加一个已更改颜色的类（无转换）。。如果没有超时，这两种情况将同时发生，此时，您添加了颜色，并且类就在那里，因此传输将发生work@TemaniAfif-它们可能（不太可能）或可能不会“同时”发生，DOM事件的执行队列更有可能是一组同步事件？更多信息请访问@markschultheis我同时使用了这个词，因为我无法用不同的方式表达它，因为它有点复杂，而你给出的链接是我试图找到的问题之一，作为一个重复。。。因此，我想他可以理解背后的复杂逻辑，理解我所说的“相同时间”是一个很好的解决方案，但奇怪的是，如果我将超时时间从
500ms
更改为
1ms
，结果是一样的。当然，将超时设置为一个非常小的数字就等于根本不设置超时。@Jackson，但我告诉过他，它必须与课堂上过渡时的过渡持续时间相同@Jackson是的，不需要与Transion相同，任何较小的值都会有相同的结果，因为这都会延迟时间execution@ths示例中的超时不需要与转换持续时间相同。在超时中使用
1ms
与使用
500ms
的工作原理相同，这并不能解释为什么首先需要设置超时。@Temaniaf如果我是想让事情保持有序，我知道将延迟设置为小于500将得到相同的结果。关于
JavaScript
及其行为，这是一个很长的故事。所以为了简单起见，我说“必须是一样的”。我看不出这实际上如何回答为什么会发生这种转变的问题。请添加详细的解释，可能是一个工作代码示例，显示转换没有发生，以及为什么与OP问题代码相比，这里的情况是这样的。