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取得url地址参数实例
Feb 22 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 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采集时被封ip的解决方法
2010/08/29 PHP
PHP之COOKIE支持详解
2010/09/20 PHP
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
许愿墙中用到的函数
2006/10/07 Javascript
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
Python 返回汉字的汉语拼音
2009/02/27 Python
Python中的__SLOTS__属性使用示例
2015/02/18 Python
python实现中文分词FMM算法实例
2015/07/10 Python
使用Python生成XML的方法实例
2017/03/21 Python
python 性能优化方法小结
2017/03/31 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
世博会口号
2014/06/20 职场文书
机械操作工岗位职责
2014/08/08 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
vue实现列表垂直无缝滚动
2022/04/08 Vue.js