vue实现刷新动画原理和实现

今天看了下刷新动画效果的实现，先看实现方式和效果：

主要就是在public文件的index.html文件里面写一个动画样式，在页面刷新的时候让他去前面做动画，等我们的样式可以加载的时候去把这个动画样式给移除掉就可以了，看代码

index.html的样式文件部分代码

 index.html的dom元素

 具体动画可以网上查找，这里不多说，总之效果如下

 实现原理只需了解vue文件加载顺序便明白了

1、执行index.html文件

2、执行main.js文件

3、main.js挂载了app.vue文件，用app.vue的templete替换index.html中的<div id="app"></div>

4、main.js中注入了路由文件，将对应的组件渲染到router-view中

5、router-view中加载Layout文件

6、Layout 加载Navbar, Sidebar, AppMain

如此便一目了然了，刷新时先加载index.html文件，渲染加载动画，当main.js挂载app.vue文件时，index.html中写在<div id="app"></div>中的动画元素被替换移除