vue初始化动画加载的实例

更新时间：2018年09月01日 12:09:23 作者：小太阳sunshine

今天小编就为大家分享一篇vue初始化动画加载的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

1.在入口文件index.html中加入loading动画：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <!--浏览器兼容模式用最新的文档渲染模式-->
  <meta http-equiv="X-UA-Compatible" content ="IE=edge"/>
  <title></title>
  <style type="text/css">
   #Loading {
    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: #279fcf;
    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; }
  </style>

 </head>
 <body>
  <div id="Loading">
   <div class="loader-inner ball-beat">
    <div></div>
    <div></div>
    <div></div>
   </div>
  </div>
  <div id="app"></div>
  <!-- built files will be auto injected -->
 </body>
</html>

2.在app.vue的created方法中：

created() { document.body.removeChild(document.getElementById('Loading'))  
}

效果如下：

以上这篇vue初始化动画加载的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

在vue中created、mounted等方法使用小结
这篇文章主要介绍了在vue中created、mounted等方法使用小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue兄弟组件传递数据的实例
今天小编就为大家分享一篇vue兄弟组件传递数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
使用Vue CLI创建typescript项目的方法
这篇文章主要介绍了使用Vue CLI创建typescript项目的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
element ui里dialog关闭后清除验证条件方法
下面小编就为大家分享一篇element ui里dialog关闭后清除验证条件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
Vue中extends继承和组件复用性详解
这篇文章主要给大家介绍了关于Vue中extends继承和组件复用性的相关资料,组件(Component)是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,需要的朋友可以参考下
2023-11-11
关于vue2使用swiper4的踩坑记录
最近写vue的一个练手项目需要在里面实现一个轮播图,想到去用第三方插件,百度了一轮,发现大部分都是swiper这个插件,这篇文章主要给大家介绍了关于vue2使用swiper4踩坑的相关资料,需要的朋友可以参考下
2022-01-01
Vue+ElementUI 实现分页功能-mysql数据
这篇文章主要介绍了Vue+ElementUI 实现分页查询-mysql数据，当数据库中数据比较多时,就每次只查询一部分来缓解服务器和页面压力。这里使用elementui的 Pagination 分页组件,配合mysql的limit语句，实现分页查询mysql数据,下面来看看具体实现过程,希望对大家学习有所帮助
2021-12-12
Vue 2 如何添加 register-service-worker 实现缓存请求的问题
这篇文章主要介绍了Vue 2 如何添加 register-service-worker 以实现缓存请求的目的,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-11-11
Vue路由回退的完美解决方案（vue-route-manager）
最近做了一个vue项目关于路由场景的问题,路由如何回退指定页面,在此做个记录,这篇文章主要给大家介绍了关于Vue路由回退的完美解决方案,主要利用的是vue-route-manager,需要的朋友可以参考下
2021-09-09
vue深入解析之render function code详解
vue对大家来说应该再熟悉不过了，下面这篇文章主要给大家深入的解析了vue之render function code的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-07-07