AngularJS animations don't work

Question

I have a list I want to be animated, but it doesn't work. I'm using both angularjs 1.2.0 rc1 and rc2 (not at the same time, for testing).

Here's my list:

<ul class="list-group">
    <li class="list-group-item" ng-repeat="object in logstoreList" ng-animate="'demo'">
        <a ui-sref="logstores.takelist({log : object.logstore})" ng-switch="object.subfolder">
            <span ng-switch-when="true" class="badge">-</span>
            <span ng-switch-default class="badge">+</span>
        {{object.extname}}
        </a>
    </li>
</ul>

and the CSS-Content:

.demo-enter {
   -webkit-transition: all 1s linear;
   transition: all 1s linear;
   background: #000;
}

.demo-enter.demo-enter-active {
   background: #fc3;
}

Am I missing something?

Answer 1

ng-animate is deprecated in 1.2.0.

Take a look here: http://www.johnpapa.net/preparing-for-animations-in-angular-1-2-0

Edit to elaborate:

The code you have would work fine in 1.1.4 / 1.1.5.

In 1.1.4/1.1.5 you could use ng-animate directive to define a prefix to the 'enter', 'leave' animations for example. What you now have in 1.2.0+ is that this directive no longer exists, and all 'enter' and 'leave' animations always use the classes 'ng-leave' and 'ng-enter'. And the same naming for other angular animations.