vue初始化动画加载的实例

2019-11-19 13:04:34

字体：大中小

来源：转载

供稿：网友

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

上一篇：JS与jQuery判断文本框还剩多少字符可以输入的方法

下一篇：jQuery解析json格式数据示例

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注