Question

我想立即将某些css属性设置为某个值，然后从该值开始转换为不同的值。 我需要多次打电话。 当我第一次运行时，或者我在控制台上一步一步地按预期运行它，但是当在单个javascript函数中执行时它不起作用，除非我使用setTimeout强制延迟。

逐行在控制台上运行，但是一次调用all不会：

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转换，确保它可以正常工作，和/或当我更新css转换时如何知道它是否/何时转换？开始影响我想要制作动画的其他属性吗？

更新

从我的测试中，似乎设置转换属性以某种方式异步工作，但我找不到任何方法来为其更改设置回调。

Answer 1

将转换设置为：

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

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

形式语法：[无| ＆LT;单过渡性质＆gt; ] || ＆LT;时间＆gt; || ＆LT;定时功能＆gt; || ＆LT;时间

见fiddle。最初看起来你需要稍微延迟转换，不要对前一个样式更改起作用。样式属性更改没有回调，因此您只需要强制将transition元素更新到下一个浏览器事件循环中。它也在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);

Answer 2

我得到了解决方案（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';

设置css转换之间的最小间隔

2 个答案: