Question

如何在我的Progressive Web App中设置如下所示的动画启动画面？有可能吗？

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

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

1 个答案: