vue實現頁面重新整理動畫

2022-04-10 16:00:52

本文範例為大家分享了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>

這就是所有的頁面重新整理動畫的程式碼了

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

vue實現頁面重新整理動畫

熱門文章