vue怎么实现页面刷新动画

2023-06-29 23:06:14 478人浏览安东尼

摘要

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

这篇“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;                    -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怎么实现页面刷新动画