Question

我正在开发一个cordova android应用程序，并且想要在加载用户的通知时显示某种加载消息/微调器，因为在绘制所有通知的DOM时会有一些等待。

我们目前在几个地方使用cg-busy指令在等待时间显示微调器，同时完成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-show并隐藏加载动画。 ::只是性能提升。

我不能100％确定这是否是您想要的行为，因此您可能需要调整ng-show的条件。但我希望你有这个主意。

在绘制DOM时显示加载微调器

1 个答案: