vue实现页面刷新动画_vue.js_

首页 / 新闻资讯 / 正文

本文实例为大家分享了vue实现页面刷新动画的具体代码，供大家参考，具体内容如下

做一个vue的页面刷新动画，找了好多动画样式，感谢大佬们造的轮子。

主要就是在index.html文件里面写一个动画样式，在页面刷新的时候让他去前面做动画，等我们的样式可以加载的时候去把这个动画样式给移除掉就可以了，而判断我们的样式是否加载好可以用created生命周期去判断，因为这个生命周期是在浏览器解析完html的各种样式后触发的，所以可以在app.vue的created生命周期里面把动画样式移除

接下来是代码

index.html里面的代码

css样式：

<style type="text/css" scoped="scoped">          html,body {              width: 100%;              height: 100%;              padding: 0;              margin: 0;              background: cornflowerblue;          }                    .loadings{              width: 100%;              height: 100%;              display: flex;              justify-content: center;              align-items: center;          }                    .spinner {              width: 300px;              height: 50px;              position: relative;              display: flex;              justify-content: center;              align-items: center;          }            .spinner > div {            width: 30px;            height: 30px;            background-color: #67CF22;                       border-radius: 100%;            margin: 0px 10px;            display: inline-block;            -webkit-animation: bouncedelay 1.4s infinite ease-in-out;            animation: bouncedelay 1.4s infinite ease-in-out;            /* Prevent first frame from flickering when animation starts */            -webkit-animation-fill-mode: both;            animation-fill-mode: both;          }                     .spinner .bounce1 {            -webkit-animation-delay: -0.32s;            animation-delay: -0.32s;          }                     .spinner .bounce2 {            -webkit-animation-delay: -0.16s;            animation-delay: -0.16s;          }                     @-webkit-keyframes bouncedelay {            0%, 80%, 100% { -webkit-transform: scale(0.0) }            40% { -webkit-transform: scale(1.0) }          }                     @keyframes bouncedelay {            0%, 80%, 100% {              transform: scale(0.0);              -webkit-transform: scale(0.0);            } 40% {              transform: scale(1.0);              -webkit-transform: scale(1.0);            }          }                    #app{              display: none;          }  </style>

html代码

<body>          <div class="loadings">              <div class="spinner">                <div class="bounce1"></div>                <div class="bounce2"></div>                <div class="bounce3"></div>              </div>          </div>          <div id="app"></div>  </body>

下面是app.vue的代码

<script>      export default {          name: 'App',          data() {              return {                            }          },          created() {          //判断有没有动画的盒子在，在的话移除掉              let loading = document.getElementsByClassName('loadings')[0]              if(loading){                  document.body.removeChild(loading)              }          }      }  </script>    <style lang="less">      body{          background: white;//这里是把动画影响的背景颜色改回来      }      #app{          width: 100%;          height: 100%;          display: block;          //这里是把隐藏的app盒子展示出来      }  </style>

这就是所有的页面刷新动画的代码了

上一个：vue v-for循环出来的数组加不同的颜色(颜色循环)

下一个：弓形虫从哪里进入身体（弓形虫从哪里来）

热门文章

归纳