The ng-animate
directive is deprecated since AngularJS 1.2.
Instead, you rely on the classes that are added by AngularJS when an element is shown or hidden.
Please see this excellent article on how to work with animations for AngularJS 1.2 onwards.
Your HTML markup remains the same with a minor edit - remove the ng-animate
directive:
<div class="loadingmsg" ng-show="!isReady()">
<div class="loadingmsg-txt glyphicon glyphicon-flash">
{{msg.loading || 'loading'}}
</div>
<div class="progress">
<div class="progress-bar" role="progressbar"
aria-valuenow="{{msg.loadingPerc}}" aria-valuemin="0"
aria-valuemax="100" style="width: {{msg.loadingPerc}}%;">
{{msg.loadingPerc}}%
</div>
</div>
</div>
You then define the appropriate animation for the respective classes (see reference)
.loadingmsg.ng-hide-add,
.loadingmsg.ng-hide-remove {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.loadingmsg.ng-hide-add {
opacity: 0;
}
.loadingmsg.ng-hide-remove {
opacity: 1;
}