H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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>

本文地址:H5W3 » vue项目初次加载动画怎么做?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址