加载时，Page Load Animation正在闪烁(变焦)

我们的Angular(V7(应用具有一个飞溅动画，该动画基本上显示了嵌入index.html的旋转轮(CSS动画(，因此立即显示在页面加载上。

这可以正常工作，但是每〜4页加载都会有一个轻微的变焦级别(我在Windows 10上使用了最新的Chrome(，这意味着将" plaplash Messages"的Square Div开始于一个尺寸，然后掉落大约5％的大小。从静态HTML内容渲染的那一刻起，在呈现角度视图之前，它发生了很快，大约一秒钟。看起来有些渲染引擎正在懒洋洋地加载，并且出了问题(？(

可以是Angular在页面加载上更改Zoom/Translation系数吗？

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>

盒装大小是由我们自己的代码设置的。

相关内容

最新更新

热门标签：