1

I am rendering markup which contains wrapping divs every 5 items

   <div class="snap" ng-repeat="itemsChunk in items">
        <a class="timeline-item" href="#" ng-repeat="item in casestudyChunk">
             <img class="img-responsive" src="{{item.ImageUrl}}" />
        </a>
   </div>

Where item is an array split into chunks. Split array into chunks

Since the markup needs completely re-rendering after the datasource has changed, I can't use the normal animate hooks. I instead want to fade out all the items before the change, and fade the newly rendered markup in.

How can I do this with Angular?

Update

An option I've got is to apply a fadeOut class to the elements, listen for the complete event and then bind afterwards. This doesn't feel like the proper angular way of doing it though. Is there a better way?

Also I am lazy loading images, so need to run a function to trigger this after binding. I have seen this done with a timeout, again if there is a better way I am interested.

Community
  • 1
  • 1
Tom
  • 12,591
  • 13
  • 72
  • 112

1 Answers1

1

You can try use animate.css and add to your 

<div class="snap" ng-repeat="itemsChunk in items">

fadeIn css-class

  <div class="snap animated fadeIn" ng-repeat="itemsChunk in items">

there you can find simmilar solution

sylwester
  • 16,498
  • 1
  • 25
  • 33
  • I have updated my question a bit. Sure, this is a nice solution for fading the items in. I could also fade out the items in a similar way, but I am wondering if there is a more 'angular' way of doing it – Tom Jun 13 '14 at 14:02