vue.js - vue项目初次加载动画怎么做?
本文介绍了vue.js - vue项目初次加载动画怎么做?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
用的是vue2.0+/elementUI
初次访问入口文件加载时.如何加入loading动画,等所有文件加载完毕后再关闭动画?
是要单独在入口文件加个图层吗?是不是不能用vue做初次加载?
我想统一使用elementUI里的动画...
有什么方法吗?
解决方案
想要用包含vue的代码加在前做入口的加载提示，又必须等vue加载完毕，是不是有点矛盾。
一般做法，是在入口的html文件里直接添加你要的加载提示，让它在页面刚开始加载的时候默认显示，而隐藏主页面的root标签。再在vue项目的入口vue里的created或mounted里将加载提示的标签删除或隐藏，再将主页面root标签显示。
入口HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">
<style media="screen" type="text/css">
#appLoading { width: 100%; height: 100%; }
#appLoading img {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
</style>
</head>
<body>
<div id="appLoading">
<img src="/static/img/loading.gif" alt="loading" />
</div>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>入口vue文件：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
created() {
try {
document.body.removeChild(document.getElementById('appLoading'))
setTimeout(function() {
document.getElementById('app').style.display = 'block';
}, 500)
} catch (e) {
}
}
}
</script>这篇关于vue.js - vue项目初次加载动画怎么做?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
