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中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
简单的三步vuex入门
May 20 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
原生js实现碰撞检测
Mar 12 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 超链接 抓取实现代码
2009/06/29 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
JQuery删除DOM节点的方法
2015/06/11 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
python实现的重启关机程序实例
2014/08/21 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Python如何转换字符串大小写
2020/06/04 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
汽车工程专业应届生求职信
2013/10/19 职场文书
大专自我鉴定范文
2013/10/23 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
2014教师研修学习体会
2014/07/08 职场文书
开服装店计划书
2014/08/15 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
经理聘任证明
2015/03/02 职场文书
尼克胡哲观后感
2015/06/08 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
Python实现自动玩连连看的脚本分享
2022/04/04 Python