javascript - 适当的 JavaScript 延迟来触发 CSS？

Question

假设我有一些 CSS，所以 #joe { transition: opacity 500ms;不透明度:0； }

然后我有 JavaScript，所以当您单击页面时，它会添加 div，然后将 opacity 设置为 = 1。

document.body.onclick = function () {
  var joe = document.createElement('div')
  joe.innerHTML = 'yo!'
  joe.id = 'joe'
  document.body.appendChild(joe)
  joe.style.opacity = 1
}

嗯，它doesn't animate . (我猜是因为 CSS 转换将其视为“初始页面加载”)

但是如果你加一个超时时间

document.body.onclick = function () {
  var joe = document.createElement('div')
  joe.innerHTML = 'yo!'
  joe.id = 'joe'
  document.body.appendChild(joe)
  setTimeout(function () {
    joe.style.opacity = 1
  }, 100)
}

然后 the animation works .

但在某些情况下，即使是 100 毫秒的延迟也会明显影响页面的响应速度。而且，不幸的是，将超时设置为 1 毫秒 doesn't work .

那么，超时应该是多少？我希望动画能够在主要浏览器上始终有效，但我不想在没有充分理由的情况下提高超时时间。

我对 jQuery 动画不感兴趣，因为根据我的经验，它的效率低于 CSS 转换，并且不能很好地同步多个动画。如果有其他 JavaScript 实现胜过 CSS，我愿意接受建议，但不要因此而阻止您回答这个问题。

如果 CSS 有一个 initial 动画，那会很高兴...

但我真正想知道的是应该如何设置超时，因为有时我为 left 或 width 设置动画，但我不想在代码中输入当我需要使用 JavaScript 动态计算这些值时，将开始和结束写入 CSS。

Answer 1

可以使用 window.<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle" rel="noreferrer noopener nofollow">getComputedStyle()</a> 在没有 setTimeout 的情况下实现它.

基本思路是:

joe.style.opacity = 0; //unnecessary in this case, set by css class   
window.getComputedStyle(joe).getPropertyValue("width");
joe.style.opacity = 1;   

这是 jsfiddle:http://jsfiddle.net/4Vy9n/2/