CODEWITHSUNDEEP
cssangularjsanimation
blenzcoffee
blenzcoffee

Reputation: 891

Can't get animation with ng-repeat working

I have a simple ng-repeat with animate. I already made my module to depend on ngAnimate, and I already defined my transitions in CSS using classes like .ng-enter and .ng-enter-active.

I went to the related post like here and here but I can't get my code to work. Here's the jsFiddle of it. I find that the reason is my item doesn't get .ng-enter class assigned to it, but I am not sure why I can't do it this way. Any help is appreciated.

Thanks.

Upvotes: 2

Views: 562

Answers (1)

matthewpavkov
matthewpavkov

Reputation: 2928

This can be achieved, but not with how you're filtering the data. Instead of your current filter actually updating and the ng-repeat rendering new elements, you're just simply changing the data, which doesn't re-render and no animate classes are applied. But, if change how you're filter so that it actually uses the filter, then things start working.

http://jsfiddle.net/Lfmp8pdu/4/

angular
.module('App', ['ngAnimate'])
.controller('AppCtrl', [
  function() {
    var data = this;
    data.next = next;
    data.previous = previous;

    init();

    function init() {
      data.items = [
        {title: "One", page: 1},
        {title: "Two", page: 1},
        {title: "Three", page: 1},
        {title: "Four", page: 2},
        {title: "Five", page: 2},
        {title: "Six", page: 2},
        {title: "Seven", page: 3}
      ];

      data.page = 1;
    }

    function next() {
      data.page++;
    }

    function previous() {
      data.page--;
    }
  }
]);

And the modified filter in html:

<div class="itemsContainer">
  <span ng-repeat="item in ctrl.items | filter:ctrl.page" class="animate">
    {{item.title}}
  </span>
</div>

This is not a good way to do this as far as the pagination goes. There are better solutions out there. Also, if you want this to be more like a true carousel, then you could try just inlining all of your elements and shifting the entire thing left/right - so in that case, everything would always be rendered, you would not use a filter, but instead change the left/right absolute position in CSS via your buttons.

Upvotes: 2

Related Questions