vue初始化动画加载的实例


Posted in Javascript onSeptember 01, 2018

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初始化动画加载的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
Vue实现日历小插件
Jun 26 Javascript
jQuery解析json格式数据示例
Sep 01 #jQuery
vue+vue-router转场动画的实例代码
Sep 01 #Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 #Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 #Javascript
jQuery实现表格隔行换色
Sep 01 #jQuery
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 #Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 #Javascript
You might like
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
PHP循环结构实例讲解
2014/02/10 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
获取body标签的两种方法
2011/10/13 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
Python微医挂号网医生数据抓取
2019/01/24 Python
python实现串口自动触发工作的示例
2019/07/02 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
一套C#面试题
2013/10/09 面试题
团员学习总结的自我评价范文
2013/10/14 职场文书
法人代表授权委托书
2014/04/08 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
python 提取html文本的方法
2021/05/20 Python
基于JavaScript实现年月日三级联动
2021/06/22 Javascript