无延迟的纯 JS 的 CSS 过渡

Question

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

这是一个示例 (also on 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 处理程序（遗憾的是，它仍然需要供应商前缀——是的）。

以下内容适用于 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>

当然，以上只是概念验证；它可以被提炼和清理。