若依vue3启动动画原理

513 阅读1分钟

vue3模板html中,会有一个有id的div来作为vue单页面应用的容器,在这个容器里面写一些html,在启动的时候显示,等到vue加载时,会清空此容器并且把单页面内容放到该容器中,因此可以利用这种方式来设置启动动画,若依vue3中的示例如下:

<body>
  <div id="app">
    <!-- 容器内写一个全屏的loading -->
    <div id="loader-wrapper">
      <div id="loader"></div>
      <div class="loader-section section-left"></div>
      <div class="loader-section section-right"></div>
      <div class="load_title">正在加载系统资源,请耐心等待</div>
    </div>
  </div>
  <script type="module" src="/src/pageone/main.js"></script>
</body>