vue怎么實(shí)現(xiàn)頁面刷新動(dòng)畫

發(fā)布時(shí)間：2022-04-11 10:37:13 來源：億速云閱讀：297 作者：iii 欄目：開發(fā)技術(shù)

這篇“vue怎么實(shí)現(xiàn)頁面刷新動(dòng)畫”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue怎么實(shí)現(xiàn)頁面刷新動(dòng)畫”文章吧。

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() {
        //判斷有沒有動(dòng)畫的盒子在，在的話移除掉
            let loading = document.getElementsByClassName('loadings')[0]
            if(loading){
                document.body.removeChild(loading)
            }
        }
    }
</script>

<style lang="less">
    body{
        background: white;//這里是把動(dòng)畫影響的背景顏色改回來
    }
    #app{
        width: 100%;
        height: 100%;
        display: block;
        //這里是把隱藏的app盒子展示出來
    }
</style>

這就是所有的頁面刷新動(dòng)畫的代碼了

vue怎么實(shí)現(xiàn)頁面刷新動(dòng)畫

以上就是關(guān)于“vue怎么實(shí)現(xiàn)頁面刷新動(dòng)畫”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

vue怎么實(shí)現(xiàn)頁面刷新動(dòng)畫

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽