animated-gif - 具有动画启动屏幕的渐进式 Web 应用程序

Question

如何将如下所示的动画启动屏幕设置到我的 Progressive Web App 中？是否可以？

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