javascript - ページ終了時の CSS トランジションプロパティ

Question

ユーザーがリンクをクリックしたときにアニメーション化するために、ページ上にいくつかのオブジェクトが必要です。ナビゲーションボタンなどのすべてのオブジェクトではなく、各オブジェクトをスケーリングおよびフェードアウトさせたい。

ユーザーがリンクをクリックすると、ページが 1 秒遅れてリンクをリダイレクトし、アニメーションが有効になるまでフェードアウトできるようになると考えていました。

score 4 · Accepted Answer

JSイベントを見てくださいwindow.onbeforeunload

この関数がトリガーされたときに、終了アニメーションを実行するだけで十分であることが期待されます。通常、ブラウザーがページを完全にアンロードするのに約 1 秒かかりますが、これはブラウザー、ページサイズ、および CPU 速度によって異なります。

プレーンな JS を使用していて、CSS トランジションの方法を知っていると仮定すると、ページ終了時にアニメーションを発生させる簡単な方法は次のようになります。

window.onbeforeunload = function(e){
    document.getElementById('myDiv').className = 'out';
}

idmyDivはアニメーション化する要素outであり、トランジションの最終段階を表す CSS クラスです。

ここに JSfiddle があります: http://jsfiddle.net/X5vKS/

待機時間をより細かく制御する必要がある場合は、onbeforeunload関数を使用しsetTimeoutて、アニメーションの時間だけページの終了を遅らせることができます。これは JS の初心者にとっては少し複雑ですが、かなり実行可能です。

javascript - ページ終了時の CSS トランジション プロパティ