0

i am currently using angular 1.2 rc3, i used transition for my ng-repeat items. however, i found that whenever i change my model for the ng-repeat, the transition goes haywired. You'll see the whole list of items pop down and then disappear. What i wanted to have is just a simple fade out the whole list, and fade in the new items list. How can I achieve that effect?

Here's the plunker to reproduce that: http://plnkr.co/edit/lnsxCySFGmUmAnYDqVm3?p=preview Just add a few lines, and then change model, you'll see that weird behaviour.

Thanks.

CooKies
  • 33
  • 4
  • It appears the example does not work in FF. Chrome seems to be fine. – lex82 Nov 09 '13 at 09:10
  • @lex82 the example doesn't work in FF because I didn't add the transition prefix for mozila, adding this: -moz-transition: 1s in the css should fix it. :) – CooKies Nov 11 '13 at 04:23

1 Answers1

0

The problem appears to be that when you are switching the list content the new elements are immediately inserted at the top and occupy some space although they are not visible yet. An improvement might be to animate the height as well see this modification of your plunker for an example.

Another solution would be to delay the enter animation when you are switching the list contents completely. First the present elements disappear and then the new ones appear. However, you will probably need an extra class attached to the whole list to make this distinction in your CSS. And you will have to manually handle the addition and removal of the class before and after your switch animation since ng-repeat does not distinguish your switch operation and the addition or removal of single elements.

lex82
  • 11,173
  • 2
  • 44
  • 69
  • I think i'll mark yours as the answer since I actually found out as well the problem is not really a bug. Please refer to deakster comment on the expected behaviour. https://github.com/angular/angular.js/issues/3613#issuecomment-28124584 – CooKies Nov 11 '13 at 04:29
  • I am working on a similar animation and found another nice solution for my problem: when all the items in the list are exchanged, i animate the list, not the items. The old list disappears to the right, the new list comes in from the left. More complicated to implement, but looks nice! – lex82 Nov 11 '13 at 09:07