2016-05-20 7 views
-2

私はJSでクラスを設定し、CSSトランジションでアニメーションを行う小さなスライダを作成しました。JS/CSSウィンドウがアクティブでないときの遷移

ウィンドウがアクティブでないとき(たとえば、別のタブで見ているときなど)、戻ってくると少し混乱があります。 1つの移行期間の後、混乱はなくなった。別のウィンドウで動いているアニメーションのように見えます。

ウィンドウがアクティブでないうちに、JSが動作しているのにCSSトランジションが実行されていないようです。

簡単な例:https://jsfiddle.net/ugxkjr3s/

が数秒間非アクティブなウィンドウを維持し、本部が速く動く参照してください。左は関数の移動で数回設定されます。しかし、CSS Transitionは、ウィンドウが再びアクティブになったときにのみ起動します。だからDivは一度に終わりの位置に移動します。

setInterval(move, 1000); 
var left=0; 

function move() { 
    $("div").css("left", left); 
    left=left+20; 
} 
+0

どのように我々はあなたが試験に任意のコードを投稿していないときに役立つことができるはずであるとき、スクリプトの実行を停止しているのですか?あなたは質問を投稿する方法を知るのに十分なほど長くここにいました。 – LGSon

+0

あなたはイベント(ハンドラ)を削除して、読み込んだCSSの遷移を中和することができます – Nitin

+0

@LGS私は少し早すぎて質問を提出しました。ここで例を挙げてください。しかし、公正になる。この問題はコード固有ではありません。 – nbar

答えて

0

問題は、タブ/ウィンドウが隠されているとき、ブラウザはその内容を再描画しないことですが、スクリプトが実行され続け、そしてあなたが戻ったとき、それが原因となる最初のスクリプトの実行時に追いつきます再描画。あなたは何ができるか

Page Visibility APIを使用すると、タブ/ウィンドウが非表示

関連する問題