vue初始化动画加载的实例
2018-09-01 12:09
941 查看
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初始化动画加载
- Java 类的实例变量初始化的过程 静态块、非静态块、构造函数的加载顺序
- Vue.js上下滚动加载组件的实例代码
- 一次偶然机遇找到一个不错的关于Android实现加载gif动画的实例,写一下分享个大家。
- Java类加载与初始化机制实例分析
- Java 类的实例变量初始化的过程 静态块、非静态块、构造函数的加载顺序
- vue.js整合vux中的上拉加载下拉刷新实例教程
- class文件的加载、初始化、实例化
- java 程序加载过程---3--类中申明同时申明类的静态对象 创建类的实例 访问类的静态变量 调用类的静态方法 使用反射方法 初始化类的子类对象 直接使用java.exe 调用某个类
- 加载 vue 远程代码的组件实例详解
- android仿爱奇艺加载动画实例
- 使用Typescript写的Vue初学者Hello World实例(实现按需加载、跨域调试、await/async)
- 【实例教程】你会用swift创建复杂的加载动画吗
- vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画
- vue-lazyload图片延迟加载插件的实例讲解
- Vue1.0学习总结(3)———vue1.0的生命周期、vue计算属性computed的使用、vue实例(vm)上方法总结、vue结合动画使用
- vue实现app页面切换动画效果实例
- dialog加载动画实例