设置CSS过渡的最小时间间隔是多少？

Question

我希望立即将某些CSS属性设置为某个值，然后从该值开始过渡到不同的值。我需要多次调用此功能。第一次运行或在控制台逐步执行时，它按预期工作，但在单个JavaScript函数中执行时，除非我使用setTimeout强制延迟，否则它不起作用。

在控制台逐行运行可以正常工作，但一次性调用不起作用：

el.style.transition = ''; // no transition from now
el.style.left = '50px'; // set instantly to 50
el.style.transition = '1s'; // 1s transition from now
el.style.left = '250px'; // animate from 50 to 250

这里是jsfiddle演示。

所以问题是 - 我如何更新css transition，以确保它会工作，或者当我更新css transition时，如何知道它何时开始影响其他我想要动画化的属性？

更新：从我的测试中，似乎设置transition属性在某种程度上是异步的，但我找不到任何为其更改设置回调的方法。

- Michał Šrajer

Answer 1

我已经找到了解决方案（http://jsfiddle.net/9wsrv0mg/9/）。

关键在于读取一些DOM属性，这将强制浏览器JS和渲染线程进行同步。

所以，下面这段代码可以正常工作：

el.style.transition = '';
el.style.left='50px';
var tmp = el.offsetLeft; // HERE COMES THE MAGIC - reading this prop forces delay we need
el.style.transition = 'left 1s';
el.style.left='250px';

- Michał Šrajer

Answer 2

将过渡效果设置为：

el.style.transition="left 1s linear 1s"。

您需要使用CSS3 transition-delay 属性，但可以在使用的更广泛的transition 属性中设置此属性。这允许设置几个过渡选项，其中第四个是延迟时间。

正式语法：[ none | < single-transition-property > ] || < time > || < timing-function > || < time

看这个fiddle。一开始似乎需要稍微延迟一下，以防过渡效果影响之前的样式更改。由于没有样式属性更改的回调函数，因此只需强制更新过渡元素到下一个浏览器事件循环即可。这也在this答案中提到过。

el.style.transition = 'left 0s linear 0s'; // no transition from now
el.style.left = '50px'; // set instantly to 50
setTimeout(function(){
    el.style.transition = 'left 1s linear 1s'; // 1s transition from now
    el.style.left = '250px'; // set instantly to 50
}, 0);

- RichieAHB

---

将延迟设置为“1秒”或“0秒”无效。我在Firefox和Chrome上进行了测试。你在jsfiddle上试过吗？ - Michał Šrajer

谢谢你的努力，但它只在第一次调用时有效。请查看更新的http://jsfiddle.net/fbLLkd3r/1/ 我设法再次破坏了 :-) - Michał Šrajer

让我们在聊天中继续这个讨论。 - RichieAHB

很不幸地，setTimeout(, 0)并不总是起作用。 - Michał Šrajer

setTimeout(,1)怎么样？我认为这应该没有问题。浏览器事件不会持续一毫秒。 - RichieAHB