アニメーション起動画面付きプログレッシブWebアプリケーション

Question

どのように私のプログレッシブWebアプリケーションに、以下のようなアニメーション起動画面を設定できますか？出来ますか？

Animated Launch Screen

Answer 1

現在PWAのスプラッシュ画面は、色、ロゴ、およびタイトルで構成することができます。より強力なAPIを提供することについては、standards discussions happeningがありますが、この回答では何も固まっていません。

標準の静的スプラッシュ画面を使用して、アプリのコンテンツにアニメーションを付けることもできます。次に、PWAのbackground_colorに一致するオーバーレイを作成し、バックグラウンドをツールバーにアニメーション化するサンプルコードを示します。明らかに、色を微調整したいと思うでしょう。スライドアップアニメーションの代わりにフェードインに切り替えることもできます。

<style> 
    #splash { 
    background-color: #2196F3; 
    position: fixed; 
    top: 0; 
    height: 100vh; 
    width: 100vw; 
    z-index: 10; 
    transition-property: top; 
    transition-duration: 300ms; 
    transition-delay: 300ms; 
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1); 
    } 

    #splash.animate { 
    top: -100vh; 
    } 
</style> 

<script> 
    document.addEventListener('DOMContentLoaded',() => { 
    document.querySelector('#splash').addEventListener('transitionend', (event) => { 
     event.target.remove(); 
    }); 
    requestAnimationFrame(() => { 
     document.querySelector('#splash').classList.add('animate'); 
    }); 
    }); 
</script> 

<div id="splash"></div> 

SampleからDemo - Source