ngAnimate doesn't animate transitions

Question

I'm writing and app and ngAnimate stopped working at some point. I'm trying to debug it and cut down my app to this very minimal example where there's nothing more happening than animation when pushing a button. Still, I can't find out why it's not working. I'm injecting the ngAnimate as it's supposed to and I also have script-tag to include the source.

var searchApp = angular.module('searchApp', ['ngAnimate'])

http://plnkr.co/edit/ZJIF6BGs0ORr3S6YnJwG?p=preview

Anyone can see what I'm doing wrong? It must be some very obvious thing because the app is now so simple... spent hours trying to see it.

Answer 1

The issue is with your CSS not with Angular.

Here's a working version

Problem one is that .testiDiv .ng-hide is not valid in this situation, it implies that you're expecting .ng-hide to be within .testiDiv rather than on it.

Problem two is that the animation was on the wrong class, it should be related to the animation classes Angular automatically applies on elements using ng-show / ng-hide.

.testiDiv {
  background-color: black;
  width: 100px;
  height: 100px;
  opacity: 1;
}

.testiDiv.ng-hide {
  opacity: 0;
}

.testiDiv.ng-hide-add, .testiDiv.ng-hide-remove {
  -webkit-transition:all 1s linear;
    -moz-transition:all 1s linear;
    -o-transition:all 1s linear;
    transition:all 1s linear;
}