过渡开始得太早，而 css 风格尚未完全应用

Question

我的代码在这里。有三个位置：zero(0,0)、end(200,200)、random(0,200)。

div 位于开始时random(0,200)的位置。

我想：

步骤1）将div设置为位置zero(0,0)。此步骤无动画

步骤2）通过过渡将其从位置zero移动到位置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。而我真正想要的是动画从位置zero定位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(); 

谢谢大家。很抱歉我造成的混乱。

Answer 2

这实际上是唯一的方法，因为在CSS更改之间，浏览器需要与当前运行的代码"脱离"。

当您使用代码退出setTimeout()时，将应用 CSS，然后运行其他代码。这将产生预期的行为。