使用纯JS进行CSS过渡而没有延迟

Question

我想要实现的是从js两次更改某些属性（在上面的代码中为background-color ），以便在它们之间进行过渡，而不是从先前的状态转换为第一个状态。 上面的代码几乎永远不会起作用，因为超时设置为零，当它至少设置为10时，它几乎总是可以工作，而当我将其设置为100时，它总是在我的机器上可以工作。线性运行代码或基于适当的事件回调运行代码（到目前为止，我没有发现任何有用的信息）。

这是一个示例（ 也在jsFiddle上 ）：

 var outter = document.getElementById('outter'); var test = document.getElementById('test'); test.onclick = function() { outter.removeChild(test); test.style.backgroundColor = 'green' outter.appendChild(test); setTimeout(function() { test.style.backgroundColor = 'red' }, 0); } 

 #test { position: fixed; left: 2em; right: 2em; top: 2em; bottom: 2em; background-color:red; transition-duration: 2s } 

 <div id=outter> <div id=test></div> </div> 

Answer 1

没有超时：

 var outter = document.getElementById('outter'); var test = document.getElementById('test'); test.onmousedown= function() { test.style.transitionDuration = "0s"; test.style.backgroundColor = 'green'; }; test.onmouseup= function() { test.style.transitionDuration = "2s"; test.style.backgroundColor = 'red'; }; 

 #test { position: fixed; left: 2em; right: 2em; top: 2em; bottom: 2em; background-color:red; } 

 <div id=outter> <div id=test></div> </div> 

Answer 2

我设法在进入绿色状态时使用了非常短的过渡，并使用了transitionend处理程序（可悲的是，仍然需要供应商前缀-yeesh）来做到这一点。

以下内容适用于Firefox，Chrome和IE11。 （我应该注意，您不必使用类，我只喜欢在CSS中保持样式；您可以使用outter.style.transitionDuration = "2s";等等。）

 var outter = document.getElementById('outter'); var test = document.getElementById('test'); function onTransition(element, handler, add) { var method = (add ? "add" : "remove") + "EventListener"; element[method]("transitionend", handler, false); element[method]("mozTransitionEnd", handler, false); element[method]("webkitTransitionEnd", handler, false); } test.onclick = function() { // If we're running... if (outter.classList.contains("green")) { // ...reset onTransition(outter, greenToRed, false); onTransition(outter, redDone, false); outter.classList.remove("green", "red"); } onTransition(outter, greenToRed, true); outter.classList.add("green"); }; function greenToRed() { onTransition(outter, greenToRed, false); onTransition(outter, redDone, true); outter.classList.add("red"); } function redDone() { onTransition(outter, redDone, false); outter.classList.remove("green", "red"); } 

 #test { position: fixed; left: 2em; right: 2em; top: 2em; bottom: 2em; background-color: red; } .green #test { background-color: green; transition-duration: 0.0001s; } .red #test { transition-duration: 2s; background-color: red; } 

 <div id=outter> <div id=test></div> </div> 

当然，以上只是概念证明； 可以对其进行完善和清理。