vue 添加初始化动画

野性酷女 2021-09-04 08:34 337阅读 0赞

这个蛮简单的，蛮写一下  
思路：在index.html文件的body中写一个id为Loading的div，然后再created生命周期的时候判断这个div是否存在，存在的话就移除。(建议用css写动画，减少资源占用)

created: function(){ 
     document.body.removeChild(document.getElementById('Loading'));
     },

html内容如下

<div id="Loading">
     <div class="loader-inner ball-beat">
     <div></div>
     <div></div>
     <div></div>
     </div>
     </div>

附小动画样式代码：

<style type="text/css">
        #Loading {
            top:50%;
            left:50%;
            position: absolute;
            -webkit-transform: translateY(-50%)  translateX(-50%);
            transform: translateY(-50%)  translateX(-50%);
            z-index:100;
        }
        @-webkit-keyframes ball-beat {
            50% {
                opacity: 0.2;
                -webkit-transform: scale(0.75);
                transform: scale(0.75); }
                100% {
                opacity: 1;
                -webkit-transform: scale(1);
                transform: scale(1); } }
    
        @keyframes ball-beat {
            50% {
                opacity: 0.2;
                -webkit-transform: scale(0.75);
                transform: scale(0.75); }
    
            100% {
                opacity: 1;
                -webkit-transform: scale(1);
                transform: scale(1); } }
    
        .ball-beat > div {
            background-color: #5D9BFF;
            width: 15px;
            height: 15px;
            border-radius: 100% !important;
            margin: 2px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            display: inline-block;
            -webkit-animation: ball-beat 0.7s 0s infinite linear;
            animation: ball-beat 0.7s 0s infinite linear; }
        .ball-beat > div:nth-child(2n-1) {
            -webkit-animation-delay: 0.35s !important;
            animation-delay: 0.35s !important; }
    </style>