1

I am trying to do what looks like a simple process: to display a list of items received from an HTTP request with animation.

First of all, here is my way of doing it ( I am open to any suggestions to do it in a better angular way ):

  • I define a scope variable state that I initialize to loading in my controller and that I change to loaded when I receive data from the HTTP request.
  • I initialize a scope variable items with the received data.
  • In my view, I use ng-switch for the states, and ng-repeat with the items.
  • I define an animation with css on ng-repeat.

Here is a plunkr ( with a $timeout instead of the request ).

I cannot understand why the animation does not work.

Any help will be appreciated. Thanks.

Gregory Bouteiller
  • 103
  • 2
  • 7

2 Answers2

1

The reason it is happening is because your ng-when. The same thing happens with ng-if, but would work fine if you used ng-show.

The problem is that when your ng-when condition returns true, the ng-when first renders it's content in a detatched dom (so animations do not happen). This dom is then attached to the dom tree (this step is animated but you would have to put your animation class on the ng-when).

When using something like ng-show or ng-hide things work as expected because the dom is always attached (it is simply shown/hidden).

This might be considered either a bug or a limitation of ng-animate, you might want to post a github issue and see if the angular guys have any thoughts.

Daniel Tabuenca
  • 13,147
  • 3
  • 35
  • 38
  • Thank you for the answer. I have also tried with `ng-show` and then figured out it had something to do with the dom as it was working with this directive, so thank you again for the clear explanation. As I said in my comment of the previous answer, my website is more complex than my example. Even if I can make things work with `ng-hide` / `ng-show`, do you think is best practice for what I intend to do? – Gregory Bouteiller Nov 30 '13 at 09:50
  • ng-show will typically be less performant because all watches in that dom will still be processed at each $digest() cycle even if the content is hidden, but this might be perfectly fine (if your page is just showing loading....) there's nothing going on anyways so watches aren't getting triggered until loading is done, at which point you WANT them to be triggered. It is more of an issue if you are hiding a bunch of different dom trees and only showing one at a time. Then you should consider better solutions, such as routing. – Daniel Tabuenca Nov 30 '13 at 10:07
1

It seems to be a "feature" of angular that it won't add .ng-enter to repeat items inside ng-switch-when block. You can remove ng-switch-when="loaded" and it will work (You don't really need it as ng-repeat won't do anything if there is no items) 

<div ng-switch="state">
  <div ng-switch-when="loading">
    <p>Please wait...</p>
  </div>
  <div >
    <ul ng-repeat="item in items" class="animate-items">
      <li>{{item}}</li>
    </ul>
  </div>
</div>

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

Mark Ni
  • 2,383
  • 1
  • 27
  • 33
  • First of all, thank you for the quick answer. I have tried it and it works well with the example. The problem is that my website is more complex as my example was only used for clarity. It does not just contain a `ng-repeat` but other stuff encapsulated in the `ng-switch="loaded"` and I cannot have it displayed when data is loading. – Gregory Bouteiller Nov 30 '13 at 09:43