Vue 三种首页加载等待动画，避免首次加载白屏时间过长

最新推荐文章于 2024-05-27 12:41:44 发布
最新推荐文章于 2024-05-27 12:41:44 发布
阅读量5k 收藏 33
点赞数 9
分类专栏： vue element ui 文章标签： 动画 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sea9528/article/details/113333788
版权

先看效果

第一种

在这里插入图片描述

第二种

在这里插入图片描述

第三种

在这里插入图片描述

代码如下

注意：代码需要在index.html 中书写

第一种效果代码
// index.html  

<!DOCTYPE html>
<html lang="en">
<head>
  <style type="text/css">
    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    .chromeframe {
      margin: 0.2em 0;
      background: #ccc;
      color: #000;
      padding: 0.2em 0;
    }
    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;
    }
    #loader {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border-radius: 50%;
      border: 3px solid transparent;
      /* COLOR 1 */
      border-top-color: #FFF;
      -webkit-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -moz-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 2s linear infinite;
      /* Chrome, Firefox 16+, IE 10+, Opera */
      z-index: 1001;
    }
    #loader:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent;
      /* COLOR 2 */
      border-top-color: #FFF;
      -webkit-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -moz-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite;
      /* Chrome, Firefox 16+, IE 10+, Opera */
    }
    #loader:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      /* COLOR 3 */
      -moz-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -webkit-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite;
      /* Chrome, Firefox 16+, IE 10+, Opera */
    }
    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
      }
      100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
      }
    }
    @keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
      }
      100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
      }
    }
    #loader-wrapper .loader-section {
      position: fixed;
      top: 0;
      width: 51%;
      height: 100%;
      background: #7171C6;
      /* Old browsers */
      z-index: 1000;
      -webkit-transform: translateX(0);
      /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: translateX(0);
      /* IE 9 */
      transform: translateX(0);
      /* Firefox 16+, IE 10+, Opera */
    }
    #loader-wrapper .loader-section.section-left {
      left: 0;
    }
    #loader-wrapper .loader-section.section-right {
      right: 0;
    }
    /* Loaded */
    .loaded #loader-wrapper .loader-section.section-left {
      -webkit-transform: translateX(-100%);
      /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: translateX(-100%);
      /* IE 9 */
      transform: translateX(-100%);
      /* Firefox 16+, IE 10+, Opera */
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    .loaded #loader-wrapper .loader-section.section-right {
      -webkit-transform: translateX(100%);
      /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: translateX(100%);
      /* IE 9 */
      transform: translateX(100%);
      /* Firefox 16+, IE 10+, Opera */
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    .loaded #loader {
      opacity: 0;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    }
    .loaded #loader-wrapper {
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: translateY(-100%);
      /* IE 9 */
      transform: translateY(-100%);
      /* Firefox 16+, IE 10+, Opera */
      -webkit-transition: all 0.3s 1s ease-out;
      transition: all 0.3s 1s ease-out;
    }
    /* JavaScript Turned Off */
    .no-js #loader-wrapper {
      display: none;
    }
    .no-js h1 {
      color: #222222;
    }
    #loader-wrapper .load_title {
      font-family: 'Open Sans';
      color: #FFF;
      font-size: 19px;
      width: 100%;
      text-align: center;
      z-index: 9999999999999;
      position: absolute;
      top: 60%;
      opacity: 1;
      line-height: 30px;
    }
    #loader-wrapper .load_title span {
      font-weight: normal;
      font-style: italic;
      font-size: 13px;
      color: #FFF;
      opacity: 0.5;
    }
  </style>

</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without 
      Please enable it to continue.</strong>
  </noscript>

  <div id="app">
  //在<div id="app"> 里面加入下列代码
    <div id="loader-wrapper">
      <div id="loader"></div>
      <div class="loader-section section-left"></div>
      <div class="loader-section section-right"></div>
      <div class="load_title">正在加载系统,请耐心等待
        <br>
        <span>V1.3</span>
      </div>
    </div>
  </div>
</body>

</html>
第二种效果代码
// index.html  

<!DOCTYPE html>
<html lang="en">
<head>
  <style type="text/css">
   .first-loading-wrp {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 90vh;
      min-height: 90vh;
    }

    .first-loading-wrp>h1 {
      font-size: 30px;
      font-weight: bolder;
    }

    .first-loading-wrp .loading-wrp {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 98px;
    }

    .dot {
      position: relative;
      box-sizing: border-box;
      display: inline-block;
      width: 64px;
      height: 64px;
      font-size: 64px;
      transform: rotate(45deg);
      animation: antRotate 1.2s infinite linear;
    }

    .dot i {
      position: absolute;
      display: block;
      width: 28px;
      height: 28px;
      background-color: #1890ff;
      border-radius: 100%;
      opacity: 0.3;
      transform: scale(0.75);
      transform-origin: 50% 50%;
      animation: antSpinMove 1s infinite linear alternate;
    }

    .dot i:nth-child(1) {
      top: 0;
      left: 0;
    }

    .dot i:nth-child(2) {
      top: 0;
      right: 0;
      -webkit-animation-delay: 0.4s;
      animation-delay: 0.4s;
    }

    .dot i:nth-child(3) {
      right: 0;
      bottom: 0;
      -webkit-animation-delay: 0.8s;
      animation-delay: 0.8s;
    }

    .dot i:nth-child(4) {
      bottom: 0;
      left: 0;
      -webkit-animation-delay: 1.2s;
      animation-delay: 1.2s;
    }

    @keyframes antRotate {
      to {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
      }
    }

    @-webkit-keyframes antRotate {
      to {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
      }
    }

    @keyframes antSpinMove {
      to {
        opacity: 1;
      }
    }

    @-webkit-keyframes antSpinMove {
      to {
        opacity: 1;
      }
    }
  </style>

</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>

  <div id="app">
  //在<div id="app"> 里面加入下列代码
    <div class="first-loading-wrp">
      <div class="loading-wrp">
        <span class="dot dot-spin">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </span>
      </div>
      <h2>努力加载中...</h2>
  </div>
</body>

</html>
第三种效果代码
// index.html  

<!DOCTYPE html>
<html lang="en">
<head>
  <style type="text/css">
    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    .chromeframe {
      margin: 0.2em 0;
      background: #409EFF;
      color: #000;
      padding: 0.1em 0;
    }

    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;
      background-color: white;
    }

    #loader {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 50px;
      height: 50px;
      margin: -25px 0 0 -25px;
      border-radius: 50%;
      border: 3px solid transparent;
      /* COLOR 1 */
      border-top-color: #409EFF;
      -webkit-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -moz-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 2s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 2s linear infinite;
      /* Chrome, Firefox 16+, IE 10+, Opera */
      z-index: 1001;
    }

    #loader:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent;
      /* COLOR 2 */
      border-top-color: #409EFF;
      -webkit-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -moz-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 3s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite;
      /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #409EFF;
      /* COLOR 3 */
      -moz-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -o-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -ms-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      -webkit-animation: spin 1.5s linear infinite;
      /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite;
      /* Chrome, Firefox 16+, IE 10+, Opera */
    }


    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
      }
      100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
      }
    }

    @keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
      }
      100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
      }
    }

    .loaded #loader {
      opacity: 0;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    }

    .loaded #loader-wrapper {
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: translateY(-100%);
      /* IE 9 */
      transform: translateY(-100%);
      /* Firefox 16+, IE 10+, Opera */
      -webkit-transition: all 0.3s 1s ease-out;
      transition: all 0.3s 1s ease-out;
    }

    /* JavaScript Turned Off */

    .no-js #loader-wrapper {
      display: none;
    }

    .no-js h1 {
      color: #222222;
    }

    #loader-wrapper .load_title {
      font-family: 'Open Sans';
      color: #409EFF;
      font-size: 19px;
      width: 100%;
      text-align: center;
      z-index: 9999999999999;
      position: absolute;
      top: calc(50% + 60px);
      opacity: 1;
      line-height: 30px;
    }
  </style>

</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>

  <div id="app">
      <div id="loader-wrapper">
          <div id="loader"></div>
          <div class="load_title">正在加载，请耐心等待!</div>
      </div>
  </div>
</body>

</html>
sea9528
关注
  • 9
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
Vue SPA 初次进入加载动画实现代码
10-15
今天小编就为大家分享一篇Vue SPA 初次进入加载动画实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3项目中加载动画的实现
fafafafa_fa的博客
05-24 876
正常路由的引入方式通常会导致网页首屏加载时间过长，给用户带来不好的体验，所以我们通常使用路由懒加载的方式来引入路由，这样只会在使用到某个路由时才会去加载它，减少了初次加载的时间。
基于Vue的前端加载中页面动画——弹跳动画Loading组件的设计与实现
最新发布
chenchuang0128的博客
05-27 1353
基于Vue的前端加载中页面动画——弹跳动画Loading组件的设计与实现摘要随着技术的飞速进步，前端开发的复杂性日益提升。传统的开发方式通常将整个系统构建为一个整体，导致即使是微小的改动或功能的增加也可能引起整体逻辑的变动。为了解决这个问题，组件化开发应运而生，它允许开发者独立地开发、维护组件，并可以灵活地将它们组合在一起。本文介绍了一个基于Vue的加载中页面动画组件——弹跳动画Loading组件，该组件不仅优化了用户体验，还提高了开发效率和可维护性。一、引言。
Vue2嵌入HTML页面空白、互相传参、延迟加载等问题解决方案
朝花夕拾的博客
08-10 4093
html页面同样也要根据传递过来不同的参数 去调整自己的逻辑，首先知道html是如何接收到vue传来的消息的，window监听message即可接收postMessage发送来的消息。通过window.parent['vue里面绑定的名称']（需要传递的参数） 可以定义一个对象来传参 这种方法就可以调用到vue里面的方法啦！html页面接收时是通过message统一接收的，针对发送多个消息的情况下， 我们这里做下区分，将html页面通过iframe的方式嵌入进来之后，发现页面是空白的，不显示任何元素，
Vue实现网页首屏加载动画、页面内请求数据加载loading
热门推荐
在写作的路上持续输出。
11-17 1万+
Vue实现网页首屏加载动画、页面内请求数据加载loading
Vue-动画效果
见证自己学习,成长的记录
06-22 3548
接下来给我们的案例新增d点简单的动画效果，这里写两个，from(来),to(去)两个动画，编写动画其实就是定义动画 这里我定义了一个show的动画(动画名称随意，但是用的时候要对得上！vue不跟动画名进行对话，而是样式的类名作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。写法：准备好样式：v-enter：进入的起点v-enter-active：进入过程中v-enter-to：进入的终点v-leave：离开的起点v-leave-active：离开过程中。
Vue3实现滚动加载动画效果
delete_you的博客
03-14 3202
引入wow.js以及animate.css两个动画库，实现滚动到指定位置自动播放动画的效果
vue页面加载动画
qq_46617584的博客
03-01 334
vue页面加载动画
常用loading加载效果集及vue实现加载动画
pscool的博客
03-28 3527
思路：只需要先把loading的盒子摆在正中间，然后，里面的每个item都使用绝对定位，并且水平垂直居中，然后先旋转，再位移，就可以呈现一个环状，接着指定动画，并设置延迟即可。（其实，下边并不需要给loading指定大小，这样就不用设置上下左右都是0，margin是auto了） <style lang="scss"> body { margin: 0; } .modal { background: #202020; hei
vue自定义正在加载动画的例子
10-15
今天小编就为大家分享一篇vue自定义正在加载动画的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现页面加载动画效果
08-29
Vue 实现页面加载动画效果是指在 Vue 应用程序中实现页面加载动画效果，使用户在等待页面加载时看到一个友好的提示信息。这种效果可以提高用户体验和应用程序的整体性能。 实现页面加载动画效果的思路是使用 Vue 的...
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
10-17
在使用Vue与swiper结合进行动态数据加载时，可能会遇到轮播图显示白屏的问题。这个问题通常出现在数据尚未完全加载或渲染之前，swiper就开始初始化并尝试显示轮播内容。以下是一些关键知识点和解决策略。 首先，...
vue loading 页面加载动画提示
03-29
通过这种方式，我们可以轻松地在Vue项目中实现一个优雅的页面加载动画提示，提高用户在等待期间的体验。同时，由于Vue的组件化特性，这个加载组件可以复用在项目的各个部分，使得代码更加模块化和易于维护。
推荐一款Vue.js加载动画库：Vue-Loading-Spinner
gitblog_00099的博客
04-13 436
推荐一款Vue.js加载动画库：Vue-Loading-Spinner 项目地址:https://gitcode.com/nguyenvanduocit/vue-loading-spinner 在现代Web开发中，用户体验是至关重要的因素之一，特别是在处理异步数据或页面加载时。为了提供平滑且有吸引力的用户体验，Vue-Loading-Spinner 是一个值得推荐的开源项目。它是一个轻量级的Vue...
Vue - 详细实现网站首屏加载等待动画，在 vue 网页项目中实现页面加载时出现动画，解决加载白屏问题（提供详细示例代码，支持自定义 CSS 动画或 GIF 动图等）
王佳斌
01-27 7572
效果图 前言 解决白屏等待方案非常多，个人而言评判好坏的标准即 用最少最简单的代码实现相同的功能。 在 Vue 项目中，网站加载时会显示自定义动画（CSS），当文件加载完毕且页面显示时自动移除动画。 解决方案 原理：动画元素放置在 #app 内，Vue 生命周期开始时，会自动清掉 #app 下所有元素。 您可以打开控制台，将网速调慢后，观察 Elements 元素，当页面呈现的时候 <div id="app"></div> 就会被清除， 打开您的项目，找到根目录 pub
CSS动画——加载的菊花转动画
W1500507463的博客
01-15 773
CSS动画—加载的菊花转动画
Vue解决首屏加载缓慢的首屏优化秒开(亲测有效)
qq_41429765的博客
07-07 2826
在vue.config.js文件中（1）.使用chainWebpack配置的方式（1）首先在public/index.html文件中将Vue或UI相关的js包引入main.js文件中的修改，将引入的import引入vue这个去掉，然后直接使用Vue注册vant,这个vant也不需要引入，因为在步骤一里面已经引入了vant.js包router.js文件的修改,去掉引入Vue，不引入vue-router,直接注册VueRouteraxios.js文件的修改，不需要引入axios直接使用。
网页设计方案中的页面加载动画技巧
light86的专栏
03-04 448
网页设计方案中的页面加载动画技巧
vue嵌入视频进入首页
qq_41298861的博客
07-28 858
第一种形式 安装依赖： npm install vue-video-player --save main.js文件中引用： import VideoPlayer from ‘vue-video-player’ require(‘video.js/dist/video-js.css’) require(‘vue-video-player/src/custom-theme.css’) Vue.use(VideoPlayer) 新建videoPlayerPage.vue文件，视频播放界面 <templat
vue3 首屏幕加载动画
09-02
在Vue3中实现首屏加载动画，你可以参考以下步骤： 1. 首先，在你的Vue项目中创建一个全局加载组件，用于展示加载动画。你可以在组件中使用CSS或动画库来定义你想要的加载效果。 2. 在你的根组件（通常是App.vue）中引入并注册这个全局加载组件。 3. 在页面加载的过程中，使用Vue的生命周期钩子函数（如created或mounted）来控制加载动画的显示和隐藏。在页面加载之前，显示加载动画；加载完成后，隐藏加载动画。 4. 如果你想要自定义加载动画的样式，你可以在全局加载组件中定义样式，并在组件中使用<slot>标签来插入内容。 5. 最后，你可以根据你的需求在加载动画组件中添加文本或图标来显示加载状态，以提供更好的用户体验。 请注意，加载动画和数据请求的组件不应同时使用，以免出现两个加载效果。另外，要谨慎使用全局加载动画，因为它会在整个应用程序中显示。 这是一个简单的示例代码，展示了如何在Vue3中实现首屏加载动画： ```vue // 在全局加载组件中定义加载动画的样式和内容 <template> <div class="loading"> <div class="loader"></div> <p>Loading...</p> </div> </template> <script> export default { name: 'Loading', // 根据需要可以添加进入、离开过渡效果 // 可以使用CSS或动画库定义加载动画的样式 // 在created或mounted钩子函数中控制显示和隐藏 created() { // 显示加载动画 }, mounted() { // 隐藏加载动画 } } </script> // 在根组件中引入并注册全局加载组件 <template> <div id="app"> <router-view /> <Loading v-if="isLoading" /> </div> </template> <script> import Loading from '@/components/Loading.vue'; export default { name: 'App', components: { Loading }, data() { return { isLoading: true } }, created() { // 页面加载前显示加载动画 }, mounted() { // 页面加载完成后隐藏加载动画 } } </script> ``` 这样，当你的Vue应用程序加载时，首屏将会显示加载动画，加载完成后加载动画将会被隐藏。你可以根据自己的需求自定义加载动画的样式和内容。记得根据实际情况在合适的生命周期钩子函数中控制加载动画的显示和隐藏。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue实现页面加载动画效果](https://download.csdn.net/download/weixin_38721565/12772582)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue实现网页首屏加载动画、页面内请求数据加载loading](https://blog.csdn.net/weixin_48337566/article/details/127896990)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sea9528

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值