编程 Javascript

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

vue初始化动画加载的实例

- Author -

小太阳sunshine

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery EasyUI 中文API Button使用实例

Apr 14 Javascript

JavaScript实现三阶幻方算法谜题解答

Dec 29 Javascript

老生常谈关于JavaScript的类的继承

Jun 24 Javascript

jQuery实现产品对比功能附源码下载

Aug 09 Javascript

学习vue.js表单控件绑定操作

Dec 05 Javascript

js简单实现网页换肤功能

Apr 07 Javascript

JS通过调用微信API实现微信支付功能的方法示例

Jun 29 Javascript

利用Vue.js实现求职在线之职位查询功能

Jul 03 Javascript

vue中使用ueditor富文本编辑器

Feb 08 Javascript

优化Vue项目编译文件大小的方法步骤

May 27 Javascript

Element-UI 使用el-row 分栏布局的教程

Oct 26 Javascript

关于Js中new操作符的作用详解

Feb 21 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