vue怎么实现页面刷新动画

发布时间：2022-04-11 10:37:13 阅读：302 作者：iii 栏目：开发技术

Vue开发者专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

这篇“vue怎么实现页面刷新动画”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue怎么实现页面刷新动画”文章吧。

index.html里面的代码

vue怎么实现页面刷新动画

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>