vue 首屏优化体验（初始化动画）

最新推荐文章于 2025-02-22 15:58:52 发布

实习打字猿

最新推荐文章于 2025-02-22 15:58:52 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42863549/article/details/104609051

vue 专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍如何在项目中实现并应用CSS加载动画。从创建CSS文件到在HTML中引用，再到利用JavaScript控制动画显示与隐藏，文章提供了完整的步骤指导。同时，分享了多个资源链接，供读者进一步探索不同类型的加载动画。

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

# 在 static 文件夹下新建 css 文件夹，再在css文件夹下新建 loading.css 文件

.container {
  position: relative;
  text-align: center;
  width: 100px;
}

.item {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #969aec;;
  animation: item 1s ease-in-out infinite;
}
.b {
  animation-delay: .2s;
}
.c {
  animation-delay: .4s;
}
@keyframes item {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

# 在 index.html 页面的中引用 loading.css 文件

<link rel="stylesheet" type="text/css" href="static/css/loading.css">

# 在 index.html 页面的 body 插入一个 div

<div>的 id = " loading "
样式：

style=“margin: 0 auto;” // div 水平居中
style="font-size: 18px; " // 字体大小 18px
style=" text-align: center;" // 文字水平居中

<div id="loading">放在<div id="app">前面的目的是为优先显示等待加载动画

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>chenbz</title>
    <!--  引入加载动画  -->
    <link rel="stylesheet" type="text/css" href="static/css/loading.css">
  </head>
  <body>
    <div id="loading">
      <div style="padding: 300px 0;">
        <div class="container" style="margin: 0 auto;">
          <div class="item a"></div>
          <div class="item b"></div>
          <div class="item c"></div>
        </div>
        <p style="font-size: 18px; margin-top: 30px; text-align: center;">页面加载中，喝口水先，不急。</p>
      </div>
    </div>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

# App.vue

在 App.vue中添加

created() {
    let loading = document.getElementById("loading");
    if (loading !== null) {
      document.body.removeChild(loading);
    }
  }

拿到 id= “loading” 的 DOM ，如果能获取得到，把它从 body 中移除。
加载到这里说明首页已经初始化完成了，所以就可以把等待加载动画移除掉了

App.vue 完整代码：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  created() {
    let loading = document.getElementById("loading");
    if (loading !== null) {
      document.body.removeChild(loading);
    }
  }
}
</script>

<style>
</style>

css动画转载自：https://www.jianshu.com/p/9b2a71fa25e5，还有其它动画 css 代码

相关阅读：

30种CSS3炫酷页面预加载loading动画特效（推荐）：http://www.ibloger.net/article/1558.html
Loaders.css 多种纯CSS加载进度动画效果：http://www.ibloger.net/article/1568.html
load-awesome 53种纯CSS3预加载页面loading指示器动画特效：http://www.ibloger.net/article/1800.html
CSS3-Preloaders 6种CSS3预加载Loading指示器动画特效：http://www.ibloger.net/article/1556.html
按钮特效基于SVG和Segment.js的Loading加载：http://www.ibloger.net/article/1554.html
原文链接：https://blog.csdn.net/xiaokui_wingfly/article/details/51502209