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处理程序（遗憾的是，仍然需要供应商前缀 - 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>

当然，以上只是概念验证;它可以精炼和清理一下。

使用纯JS的CSS转换没有延迟

2 个答案: