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?

Mike Driver · Accepted Answer · 2013-10-07 08:39:24Z

2

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.

edited Oct 7, 2013 at 8:39

answered Oct 7, 2013 at 8:31

Mike Driver

8,5113 gold badges38 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

marcel Over a year ago

It's odd though, because class works and ng-class doesn't work.

Collectives™ on Stack Overflow

AngularJS animations don't work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related