2

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.

Improve this question
4
  • Hi blenzcoffee, what animation are you expecting? Sliding to the left? As far as I can see, it looks like you are replacing content, and the classes you're animating are never applied to the elements when clicking next/prev. Am I missing something? Commented Jan 7, 2016 at 19:51
  • @JannikRasmussen yes. It should change to left:500px. But currently, it doesn't do any animation (I think it's because my item doesn't get ng-enter class assigned to it) Commented Jan 7, 2016 at 19:53
  • @JannikRasmussen Yes, I just updated my question right before I made the comment.. I think the problem is I am replacing the content and that's the reason why ng-enter never gets applied. So, in other words I cannot do it this way? I am trying to achieve 'carousel' effect Commented Jan 7, 2016 at 19:54
  • Is it acceptable that your container has a fixed width? You can have a carousel effect, but you have to let the animation happen first - and then replace conent. Or rather replace the first/last div after animation with whatever is next in line. Commented Jan 7, 2016 at 19:57

1 Answer 1

Reset to default
2

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.

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

2 Comments

Hi, isn't filtering stuff is better? That way we don't need to render everything in case we have a lot of items (1000 for example), so technically it's better for performance?
In that case, yes. I wasn't sure what you were trying to accomplish.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.