ngAnimate does nothing?

Question

My HTML looks like this;

  <div class="loadingmsg" ng-show="!isReady()" ng-animate="{show:'animate-show', hide:'animate-hide'}">
    <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>

And I've added the necessary classes to the CSS;

.animate-show, .animate-hide {
    -webkit-transition:all linear 1s;
    -moz-transition:all linear 1s;
    -ms-transition:all linear 1s;
    -o-transition:all linear 1s;
    transition:all linear 1s;
}

.animate-show {
  opacity:0;
}

.animate-show.animate-show-active {
  opacity:1;
}

.animate-hide {
  opacity:1;
}

.animate-hide.animate-hide-active {
    opacity:0;
}

Which is all quite simple.

But then, whenever !isReady() returns true, I'd like the div to fade out. That doesn't happen, there's absolutely no transition.

What am I doing wrong?

EDIT The new CSS:

.loadingmsg.ng-hide-add,
.loadingmsg.ng-hide-remove {
    -webkit-transition:all linear 10s;
    -moz-transition:all linear 10s;
    -ms-transition:all linear 10s;
    -o-transition:all linear 10s;
    transition:all linear 10s;
}

.loadingmsg.ng-hide-add {
    opacity: 0;
}

.loadingmsg.ng-hide-remove {
    opacity: 1;
}

And the HTML:

  <div class="loadingmsg" ng-show="!isReady()">
    <div class="loadingmsg-txt glyphicon glyphicon-flash"></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>

But that still doesn't make any difference.

Answer 1

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;
}