vue首次加载页面白屏期间设置过渡动画

wcsy2018110

已于 2024-04-16 16:27:32 修改

阅读量495

点赞数 2

CC 4.0 BY-SA版权

文章标签： css3 css 前端

于 2024-04-16 16:26:08 首次发布

本文链接：https://blog.csdn.net/qq_48378883/article/details/137830084

文章描述了如何在index.html中使用自定义CSS动画（ball-beat）来显示页面初始化加载状态，并在app.vue的created生命周期钩子中移除这个加载指示器，以减少动态路由加载时的白屏时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在index.html写入

 <div id="pageInitLoading">
            <div class="loader-inner ball-beat">
                <div></div>
                <div></div>
                <div></div>
            </div>
 </div>
 <style type="text/css">
            #pageInitLoading {
                top: 50%;
                left: 50%;
                position: absolute;
                -webkit-transform: translateY(-50%) translateX(-50%);
                transform: translateY(-50%) translateX(-50%);
                z-index: 100;
            }
            @-webkit-keyframes ball-beat {
                50% {
                    opacity: 0.2;
                    -webkit-transform: scale(0.75);
                    transform: scale(0.75);
                }

                100% {
                    opacity: 1;
                    -webkit-transform: scale(1);
                    transform: scale(1);
                }
            }

            @keyframes ball-beat {
                50% {
                    opacity: 0.2;
                    -webkit-transform: scale(0.75);
                    transform: scale(0.75);
                }

                100% {
                    opacity: 1;
                    -webkit-transform: scale(1);
                    transform: scale(1);
                }
            }
            .ball-beat > div {
                background-color: #4080ff;
                width: 15px;
                height: 15px;
                border-radius: 100% !important;
                margin: 2px;
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
                display: inline-block;
                -webkit-animation: ball-beat 0.7s 0s infinite linear;
                animation: ball-beat 0.7s 0s infinite linear;
            }
            .ball-beat > div:nth-child(2n-1) {
                -webkit-animation-delay: 0.35s !important;
                animation-delay: 0.35s !important;
            }

在app.vue写入

  created() {
    // 1. 首次加载页面的空白时间
    // 2. 动态路由的加载与渲染造成的白屏
    let dom = document.getElementById("pageInitLoading");
    if (dom) {
      document.body.removeChild(document.getElementById("pageInitLoading"));
    }
  },