3

問題

javascript を使用して要素を配置し、それに遷移アプライアンス クラスを追加して、配置後にそれ以上の変更がその遷移によってアニメーション化されるようにします。

一般的に、それは大したことではありません。

しかし、それを達成するために、私は次のようなコードを書いていることに気づきました：

$('#someWindow').center('#someParent');
$('#someWindow').addClass('transition visible');

それで、キャッチは何ですか？

両方の呼び出しは、(私が理解しているように) 1 つの処理ステップ内でブラウザーによってレンダリングされます。その結果、トランジションがまったくないか、またはtransition-class が要素に適用される前に適用されたものを含め、トランジションによってアニメーション化される要素へのすべての変更が発生します。

解決？

私が最初に考えたのは、2 番目の呼び出しを呼び出しでラップすることでしたsetTimeout()。

$('#someWindow').center('#someParent');
window.setTimeout(function(){
    $('#someWindow').addClass('transition visible');
},1);

できます！レンダリングの使用setTimeout()は何とか積み重ねられ、ブラウザはすべて正しく処理します。

それで、質問は何ですか？

これは既知の問題だと思います。私の解決策は私を満足させません。完全に信頼できないかのように、一貫性がないように感じます。

それで、これがそれを行う唯一の方法ですか？または、その問題を回避するためのよりクリーンな方法はありますか?

アップデート

デモンストレーションについては、このフィドルを参照してください

(テストの合間にリセット ボタンを押すことを忘れないでください)。

4

1 に答える 1

0

Since your issue is with redrawing/repainting.
How about this

$('#el').css({
    top: '150px'
})
.redraw()
.addClass('transition visible');

$.fn.redraw = function(){
  $(this).each(function(){
    var redraw = this.offsetHeight;
  });
  return this;
};

http://jsfiddle.net/nCe6n/6/

于 2013-10-10T20:01:39.623 に答える