2

私のコードはここにあります。3つの位置があります：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' ;

className = 'pos_zero'css style（ ）がまだ完全に適用されていないのに、移行の開始が早すぎるようです。random位置から位置に直接移動しendます。そして、私が本当に望んでいるのは、からではなく、位置endから配置するアニメーションです。zerorandom

このようなコードは機能します：

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

このコードは、timeout関数を使用して正常に実行されます。このコードは、pos_zero最初にdivをその位置に設定し、次に関数によって非同期に遷移し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

新しいコードはTimeout（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 に答える