javascript - Transition开始的太早，css样式还没有应用完全

Question

我的密码是here .一共有三个位置:zero(0,0),end(200,200),random(0,200)。

一个div在random(0,200)开头的位置。

我想:

步骤 1) 将 div 设置在 zero(0,0) 位置。这一步没有动画

步骤 2) 通过转换将其从位置 0 移动到位置 end。这一步有动画

像这样的代码不能很好地工作:

document.getElementById('x').className = 'pos_zero';    // set the div to the position zero(0,0)
move(); 
// in function move: 
// document.getElementById('x').className = ' trans'; 
// document.getElementById('x').className += ' pos_end' ;

似乎过渡开始得太早了，而 css style(className = 'pos_zero') 还没有完全应用。它只是直接从 random 位置移动到 end 位置。我真正想要的是从 零 位置开始定位 end 的动画，而不是 random。

这样的代码有效:

document.getElementById('x').className = 'pos_zero';    // set the div to the position zero(0,0)    
setTimeout('move()',1);

此代码通过使用 timeout 函数成功执行。此代码首先将 div 设置在 pos_zero 位置，然后通过 timeout 函数异步进行转换。而timeout功能似乎不是很专业。

所以，我正在寻找更专业的解决方案。

顺便说一句。我想知道。是否有任何方法可以确保完全应用样式，例如“Style.flush()”之类的？

@Inerdial 它确实有效!非常感谢。要强制更新(强制立即同步回流或重新布局)，您的 javascript 应该读取受更改影响的属性，例如someSpan 和 otherSpan 的位置。`新代码无需超时即可运行。

document.getElementById('x').className = 'pos_zero';
var tmp = document.getElementById('x').offsetTop; // read a property to force an update.
move(); 

谢谢大家。对于我造成的困惑，我深表歉意。

Answer 1

感谢@Inerdial。它确实有效!实际上这个答案来自他的评论。

要强制更新(强制立即同步回流或重新布局)，您的 javascript 应该读取受更改影响的属性，例如someSpan 和 otherSpan 的位置。` - stackoverflow.com/a/1397505/41655

新代码在没有超时的情况下工作(jsfiddle.net/vd6V8):

document.getElementById('x').className = 'pos_zero';
var tmp = document.getElementById('x').offsetTop; // read a property to force an update.
move(); 

谢谢大家。对于我造成的困惑，我深表歉意。