2

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

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

我想要 ：

步骤 1) 将 div 设置在 position 中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。而我真正想要的是end从 position 定位的动画zero，而不是 from 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();

谢谢大家。并对我造成的混乱感到抱歉。

4

2 回答 2

2

感谢@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();

谢谢大家。并对我造成的混乱感到抱歉。

于 2012-06-08T01:11:33.993 回答
0

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

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

于 2012-06-07T02:04:10.437 回答