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 相关文章推荐
用JS写的一个TableView控件代码
Jan 23 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
jquery操作select方法汇总
Feb 05 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
JS实现图片切换效果
2018/11/17 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python图像和办公文档处理总结
2019/05/28 Python
PyQt5 多窗口连接实例
2019/06/19 Python
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
关于幼儿的自我评价
2013/12/18 职场文书
药品促销活动方案
2014/02/14 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
员工离职感谢信
2015/01/22 职场文书
公司人力资源管理制度
2015/08/05 职场文书
中学教师教学工作总结
2015/08/13 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript