Vue实现spa首页加载动画如何实现进场动画在很多后台管理系统中，经常会出现刷新就有进场的动画效果。这样在网页还没加载

如何实现进场动画

在很多后台管理系统中，经常会出现刷新就有进场的动画效果。这样在网页还没加载出来的，有一个过度的效果。这样不会造成空白。因为vue项目在进行渲染的页面总会有等待过程，这个过程中造成空白页。就有点不友好，很多人做法就在index.html中增加一个动画效果，然后等vue渲染完毕以后，旧替换这个效果。

原理

1：index.html是所有的vue路由访问的落脚点

2：里面定义个id=“app”

3: 未来动态编译以后，所有的页面都会放入到id=app范围内

在id=“app范围写一段动画”，然后如果路由加载成功以后，就会把id=“app”里面动画内容替换掉。

整体代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <style>
      html,
            body,
            #app {
                height: 100%;
            }

            * {
                margin: 0;
                padding: 0;
                font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
                    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
            }

            .preload__wrap {
                display: flex;
                flex-direction: column;
                height: 100%;
                letter-spacing: 1px;
                background-color: #2f3447;
                position: fixed;
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
                z-index: 9999;
            }

            .preload__container {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                width: 100%;
                user-select: none;
                flex-grow: 1;
            }

            .preload__name {
                font-size: 30px;
                color: #fff;
                letter-spacing: 5px;
                font-weight: bold;
                margin-bottom: 30px;
            }

            .preload__title {
                color: #fff;
                font-size: 14px;
                margin: 30px 0 20px 0;
            }

            .preload__sub-title {
                color: #ababab;
                font-size: 12px;
            }

            .preload__footer {
                text-align: center;
                padding: 10px 0 20px 0;
            }

            .preload__footer a {
                font-size: 12px;
                color: #ababab;
                text-decoration: none;
            }

            .preload__loading {
                height: 30px;
                width: 30px;
                border-radius: 30px;
                border: 7px solid currentColor;
                border-bottom-color: #2f3447 !important;
                position: relative;
                animation: r 1s infinite cubic-bezier(0.17, 0.67, 0.83, 0.67),
                    bc 2s infinite ease-in;
                transform: rotate(0deg);
            }

            @keyframes r {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }

            .preload__loading::after,
            .preload__loading::before {
                content: "";
                display: inline-block;
                position: absolute;
                bottom: -2px;
                height: 7px;
                width: 7px;
                border-radius: 10px;
                background-color: currentColor;
            }

            .preload__loading::after {
                left: -1px;
            }

            .preload__loading::before {
                right: -1px;
            }

            @keyframes bc {
                0% {
                    color: #689cc5;
                }

                25% {
                    color: #b3b7e2;
                }

                50% {
                    color: #93dbe9;
                }

                75% {
                    color: #abbd81;
                }

                100% {
                    color: #689cc5;
                }
            }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="preload__wrap" id="Loading">
        <div class="preload__container">
          <p class="preload__name">欢迎使用</p>
          <div class="preload__loading"></div>
          <p class="preload__title">正在加载资源...</p>
          <p class="preload__sub-title">初次加载资源可能需要较多时间 请耐心等待</p>
        </div>
        <div class="preload__footer">
          <a href="#" target="_blank">KVA后台管理系统-学相伴</a>
        </div>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>