显示一个正在绘制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的条件。但我希望你明白了。