Question

我们的Angular（v7）应用程序具有启动动画，该动画基本上显示嵌入index.html中的旋转轮（CSS动画），因此在页面加载时立即显示。

这可以正常工作，但是每加载〜4个页面，缩放级别就会略有闪烁（我使用的是Windows 10上的最新版Chrome），这意味着保存“启动消息”的正方形div以一种尺寸开始，然后下降到其大小的5％。从呈现静态HTML内容的那一刻起，以及在呈现Angular视图之前，此过程非常快，大约需要一秒钟。而且看起来有些渲染引擎正在延迟加载，并且出了点问题（？）

是不是Angular正在改变页面加载时的缩放/平移因子？

Index.html

<!doctype html>
<html lang="en" class="mitzi-page-root">
  <head>
    <meta charset="utf-8">
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .mitzi-splash-view-indicator {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-animation: fadein 2s;
        animation: fadein 2s;
      }

      @keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
      }

      @-webkit-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
      }

      .mitzi-splash-indicator-dialog-bg {
        position: absolute;
        width: 15rem;
        height: 12rem;
        align-self: center;
        border-style: solid;
        border-width: .1rem;
        border-radius: 1rem;
        background: #FFFFFF;
        border-color: #378b68;
        -webkit-animation: fadein 5s;
        animation: fadein 5s;
      }

      .mitzi-splash-indicator-loader-wrapper {
        position: absolute;
        left: 4.6875rem;
        top: 2.2495rem;
        width: 5.625rem;
        height: 5.625rem;
        padding-bottom: 3rem;
      }

      .mitzi-splash-indicator-loader {
        width: 5.625rem;
        height: 5.625rem;
        align-self: center;
        animation: mitzi-splash-indicator-spin 1s steps(8) infinite;
      }

      .mitzi-splash-indicator-message {
        position: absolute;
        top: 9.125rem;
        width: 100%;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
        font-family: 'Open Sans', serif;
        font-size: 1rem;
        font-weight: normal;
        color: #2A6E52;
      }

      @keyframes mitzi-splash-indicator-spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      .mitzi-splash-indicator-spinner {
        fill: #0c573c;
      }
    </style>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
    <link rel="shortcut icon" sizes="32x32" href="assets/img/favicon-mitzi.png" type="image/png" />
  </head>
  <body class="mitzi-body">
    <mitzi-root>
    </mitzi-root>
    <div id="mitzi_app_preloader" class="mitzi-splash-view-indicator">
      <div class="mitzi-splash-indicator-dialog-bg">
        <div class="mitzi-splash-indicator-loader-wrapper">
          <div class="mitzi-splash-indicator-loader">
            <svg class="mitzi-splash-indicator-spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;">
              <!-- HERE COMES SOME **STATIC** SVG GRAPHICS THAT IS BEING ROTATED BY **CSS** (AND NOT BY SVG ANIMATIONS - WHICH *WOULD* MESS THINGS UP)... -->
            </svg>
          </div>
        </div>
        <span class="mitzi-splash-indicator-message">Loading ...</span>
      </div>
    </div>
    <div style="display: none !important" id="hidden-div-for-assets-load-on-startup">
      <img src="assets/img/common/error.svg">
      <img src="assets/img/status_icons/form_error.png">
      <span class="pi pi-times"></span>
    </div>
    <title>mitzi</title>
  </body>
</html>

Answer 1

box-sizing由我们自己的代码设置....触发了div大小的细微更改

加载时页面加载动画闪烁（缩放更改）

1 个答案: