Angular 1.2 - ngAnimate isn't applying .ng-move class

Question

Angular's animate-repeat isn't applying the ng-move class when it seems like it should, so I'm confused and unable to create the animation I want.

I'm using ng-repeat with a custom filter to add and remove divs from a horizontal row:

 <div id="presidents">
   <div ng-repeat="president in presidents | showPresident:this" class="pres animate-repeat" id="{{ president.birth }}" >
     <a href="{{ president.url }}" target="_blank">
       <img src="{{ president.imageURL }}" alt="{{ president.name }}">
     </a>
     <p>{{ president.name }}</p>
   </div>
 </div>

I'm trying to create animations for when the divs are added and removed from the DOM. The Angular docs for ng-repeat state that there are three classes available for this type of animation: ng-enter, ng-leave, and ng-move. I've applied CSS animations to the enter and leave classes so that the divs fade in and out.

.ng-enter {
  animation: zoomIn 1s;
}

.ng-leave {
  animation: zoomOut 1s;
}

When a div fades in or out, though, the others have to slide into or out of its way and it seems like the ng-move class should be applied while that happens so that I can animate the process, but the class is never applied, so the divs just snap over instead of sliding the way I'd like. I verified that the class is never applied by giving it a red border:

.ng-move {
  border: 4px solid red;
}

So, am I misunderstanding ng-move? Why is it not applied to the remaining divs when they re-position themselves?

How do I get these divs to slide over instead of snapping?

Hopefully these two links will shed some light on the issue: https://github.com/angular/angular.js/issues/5160 and http://stackoverflow.com/a/27616435/2887841 — tasseKATT, Feb 12 '15 at 10:38

score 0 · Answer 1 · answered Feb 13 '15 at 14:28

The solution I've ended up using is to animate the width and opacity of the elements myself instead of using animate.css. As they shrink in size, the others slide into place. Looks weird with text, but works fine with images. No need for the ng-move class.

Angular 1.2 - ngAnimate isn't applying .ng-move class

1 Answers1