顯示一個正在繪製DOM的加載微調框

Question

我正在開發一個cordova android應用程序，並且希望在用戶的通知被加載時顯示某種加載消息/微調，因爲有一點需要等待DOM正在繪製所有通知。

我們目前在一些地方使用cg-busy指令來在等待時間顯示spinners，而ajax調用正在完成。然而在這種情況下，cg-busy並沒有達到我們想要的效果，因爲ajax調用非常快，而且這是需要很長時間的繪畫。

所以我的問題是這樣的：有沒有辦法讓cg-busy在DOM被繪製時顯示其微調框，或者如果沒有，有沒有類似的東西可以用來在繪製過程中顯示微調框？

Answer 1

我做的是顯示一個簡單的CSS動畫，直到角度完成初始化。有很多簡單的CSS加載動畫，你可以只是谷歌一些。在這個例子中，我將使用those之一。

那麼這是如何工作的？我添加以下div到我的html：

<div class="loadingAnimation" ng-show="::false"></div> 

而且也是繼CSS：

.loadingAnimation { 
    width: 40px; 
    height: 40px; 
    margin: 100px auto; 
    background-color: #3b454b; 
    border-radius: 100%; 
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; 
    animation: sk-scaleout 1.0s infinite ease-in-out; 
} 

@-webkit-keyframes sk-scaleout { 
    0% { 
     -webkit-transform: scale(0); 
    } 

    100% { 
     -webkit-transform: scale(1.0); 
     opacity: 0; 
    } 
} 

@keyframes sk-scaleout { 
    0% { 
     -webkit-transform: scale(0); 
     transform: scale(0); 
    } 

    100% { 
     -webkit-transform: scale(1.0); 
     transform: scale(1.0); 
     opacity: 0; 
    } 
} 

一旦角度完成初始化它會評估NG-顯示和隱藏的加載動畫。 ::只是一個性能改進。

我不是100％確定這是否是您想要的行爲，因此您可能需要調整ng-show的條件。但我希望你明白了。