애니메이션 실행 화면이있는 프로그레시브 웹 응용

Question

어떻게 진행중인 웹 응용 프로그램에 아래와 같은 애니메이션 실행 화면을 설정할 수 있습니까? 가능한가?

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