具有動畫啓動屏幕的漸進式Web應用程序

Question

如何將以下動畫啓動屏幕設置爲我的漸進式Web應用程序？可能嗎？

Animated Launch Screen

Answer 1

目前PWA閃屏只能包含一種顏色，標誌和稱號。有一些standards discussions happening左右提供了一個更強大的API，但沒有什麼固化的答案。

一個選項是使用標準的靜態啓動畫面，然後爲您的應用程序的內容製作動畫。以下是一些示例代碼，可以創建與您的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