0

I want to achieve a smooth resorting of elements in an ng-repeat. I have this code but it results in 2 odd behaviours:

  1. The elements are only animating vertically downwards
  2. The elements are only animating if I change the model.countryData within the interval of the CSS transition (i.e. after 2 consecutive and quick changes)

ng-repeat 

<div ng-repeat="country in model.countryData" class="repeat-animation" ng-style="{ 'top' : yPos($index) }" style="position: absolute; left: 0px;">
 {{ country.name }}
</div>

CSS 

.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
  -webkit-transition: all linear 2s;
  -moz-transition: all linear 2s;
  -o-transition: all linear 2s;
  transition: all linear 2s;
}

I suspect this could be related to how I sort the underlying data and/or version issues with angular animate and/or faulty CSS syntax?

All help appreciated!

dani
  • 4,880
  • 8
  • 55
  • 95
  • Can you show the `yPos` function and how you resort the elements? – tasseKATT Dec 17 '14 at 06:34
  • Hi, it is very basic: yPos = function(i){ return i * 20 + 'px' }; I have tried to resorting elements by model.countryData = data.sort( ... ); – dani Dec 17 '14 at 07:16
  • I was able to replicate the issue, but haven't had time to look deeper into the issue. I have solved this problem before in a slightly different way. Will write an answer and post in one of your other questions. – tasseKATT Dec 19 '14 at 07:42
  • Added an answere here: http://stackoverflow.com/a/27616435/2887841 Sorry for the delay. – tasseKATT Dec 23 '14 at 14:26

0 Answers0