当按顺序添加/删除类时，由JavaScript控制的CSS3单向转换不起作用(CSS3 one-way transition controlled by JavaScript doesn't work when add/remove class sequentially)

 我想以单向方式进行CSS3过渡。 例如，我想通过设置它的background-color: yellow;来突出显示一些元素background-color: yellow; 立即，并将其设置回background-color: white; 单向过渡。 
 
 我尝试使用JavaScript来实现这一点： 
 
 
 
 
 
  
const highlightBtn = document.getElementById("highlightBtn");
const highlightToggleBtn = document.getElementById("highlightToggleBtn");
const highlightTimeoutBtn = document.getElementById("highlightTimeoutBtn");
const bodyClassList = document.getElementsByTagName("body")[0].classList;
highlightBtn.addEventListener("click", () => {
	bodyClassList.add("highlight");
  bodyClassList.remove("highlight");
  /* 
  This doesn't work, either.
  bodyClassList.toggle("highlight");
  bodyClassList.toggle("highlight");
  */
});
highlightToggleBtn.addEventListener("click", () => {
	bodyClassList.toggle("highlight");
});
highlightTimeoutBtn.addEventListener("click", () => {
  bodyClassList.add("highlight");
  setTimeout(() => {bodyClassList.remove("highlight");});
  /*
  This works, too.
  bodyClassList.toggle("highlight");
  setTimeout(() => {bodyClassList.toggle("highlight");});
  */
});
 
  
body {
	transition: background-color 1s ease;
	background-color: white;
}

body.highlight {
	transition: background-color 0s ease;
	background-color: yellow;
}
 
  
<button id="highlightBtn">
Highlight
</button>
<button id="highlightToggleBtn">
Highlight Toggle
</button>
<button id="highlightTimeoutBtn">
Highlight Timeout
</button>
 
 
 
 
 
 问题是，如果我一次切换一次类，转换工作完美。 
 
// This works fine.
highlightToggleBtn.addEventListener("click", () => {
    bodyClassList.toggle("highlight");
});
 
 但是，对于原始目标，我想突出显示该元素，所以我把add / remove添加到同一个元素只是想看单向转换，它失败了。 
 
highlightBtn.addEventListener("click", () => {
    bodyClassList.add("highlight");
    bodyClassList.remove("highlight");
    /* 
    This doesn't work, either.
    bodyClassList.toggle("highlight");
    bodyClassList.toggle("highlight");
    */
});
 
 但是，如果我使用setTimeout ，延迟为0 ms，结果是理想的。 
 
highlightTimeoutBtn.addEventListener("click", () => {
    bodyClassList.add("highlight");
    setTimeout(() => {bodyClassList.remove("highlight");});
    /*
    This works, too.
    bodyClassList.toggle("highlight");
    setTimeout(() => {bodyClassList.toggle("highlight");});
    */
});
 
 为什么第二种方法不起作用？ 将removeClass放入setTimeout是最佳解决方案吗？ 我也试过把延迟放在我身体的转换CSS中： transition: background-color 1s ease 1ms; ，但它也不起作用。 

I want to do a CSS3 transition in one-way. For example, I want to highlight some element by setting it's background-color: yellow; immediately, and set it back to background-color: white; with one-way transition.
 
I tried to use JavaScript to achieve this like this:
 
 
 
 
 
  
const highlightBtn = document.getElementById("highlightBtn");
const highlightToggleBtn = document.getElementById("highlightToggleBtn");
const highlightTimeoutBtn = document.getElementById("highlightTimeoutBtn");
const bodyClassList = document.getElementsByTagName("body")[0].classList;
highlightBtn.addEventListener("click", () => {
	bodyClassList.add("highlight");
  bodyClassList.remove("highlight");
  /* 
  This doesn't work, either.
  bodyClassList.toggle("highlight");
  bodyClassList.toggle("highlight");
  */
});
highlightToggleBtn.addEventListener("click", () => {
	bodyClassList.toggle("highlight");
});
highlightTimeoutBtn.addEventListener("click", () => {
  bodyClassList.add("highlight");
  setTimeout(() => {bodyClassList.remove("highlight");});
  /*
  This works, too.
  bodyClassList.toggle("highlight");
  setTimeout(() => {bodyClassList.toggle("highlight");});
  */
});
 
  
body {
	transition: background-color 1s ease;
	background-color: white;
}

body.highlight {
	transition: background-color 0s ease;
	background-color: yellow;
}
 
  
<button id="highlightBtn">
Highlight
</button>
<button id="highlightToggleBtn">
Highlight Toggle
</button>
<button id="highlightTimeoutBtn">
Highlight Timeout
</button>
 
 
 
 
 
The problem is, if I toggle the class once at a time, transition works perfectly.
 
// This works fine.
highlightToggleBtn.addEventListener("click", () => {
    bodyClassList.toggle("highlight");
});
 
However, for the original goal, I want to highlight the element, so I put add/remove to the same element just want to see the one-way transition, it failed.
 
highlightBtn.addEventListener("click", () => {
    bodyClassList.add("highlight");
    bodyClassList.remove("highlight");
    /* 
    This doesn't work, either.
    bodyClassList.toggle("highlight");
    bodyClassList.toggle("highlight");
    */
});
 
But, if I use setTimeout with delay is 0 ms, the result is ideal.
 
highlightTimeoutBtn.addEventListener("click", () => {
    bodyClassList.add("highlight");
    setTimeout(() => {bodyClassList.remove("highlight");});
    /*
    This works, too.
    bodyClassList.toggle("highlight");
    setTimeout(() => {bodyClassList.toggle("highlight");});
    */
});
 
Why the second method doesn't work? Is putting the removeClass in setTimeout the best solution? I also tried put a delay in my body's transition CSS like: transition: background-color 1s ease 1ms;, but it doesn't work, either.

原文：https://stackoverflow.com/questions/36834526