Sliding animation when updating an array in AngularJS - angularjs

Question

I'm developing a date-picker based on AngularJS.
The HTML is quite simple:
<div class="calendar-slider-actions">
<a class="slider-prev" ng-click="vm.prevWeek()">
<i class="ico ico-arrow-left"></i>
</a>
<div class="slider-clip">
<ul class="slides">
<li class="slide" data-ng-repeat="date in vm.dates">
<div class="radio">
<input type="radio" name="group-days" id="field-{{date.weekDay | lowercase}}" ng-value="vm.selectedDate" ng-checked="vm.selectedDate === date.date">
<label class="btn btn-primary btn-primary-alpha radio-label" for="field-{{date.weekDay | lowercase}}" ng-click="vm.selectDate(date)">
<strong>{{date.weekDay}}</strong> {{date.shortDate}}
</label>
</div>
</li>
</ul>
</div>
<a class="slider-next" ng-click="vm.nextWeek()">
<i class="ico ico-arrow-right"></i>
</a>
</div>
Styled correctly this gives me something like this
The dates are generated on the fly in the controller and only seven at the time are generated. Once I click left or right the next seven dates are calculated, the array is updated and the GUI is refreshed as well with the new dates. So far so good.
The controller looks like this:
function DayPickerCtrl($scope) {
var vm = this;
vm.selectedDate = moment().startOf('day').format();
_changeDisplayedWeek(0);
vm.selectDate = function(date) {
vm.selectedDate = date.date;
};
vm.nextWeek = function() {
_changeDisplayedWeek(7);
};
vm.prevWeek = function() {
_changeDisplayedWeek(-7);
};
function _changeDisplayedWeek(daysToAdd) {
var selectedDate = moment(vm.selectedDate).add(daysToAdd, 'days');
vm.selectedDate = selectedDate.format();
vm.weekOfYear = selectedDate.format('WW');
vm.dates = _expandWeek(selectedDate);
};
function _expandWeek(startDate) {
var dates = [];
var dayOfWeek = moment(startDate).startOf('isoweek');
for (var i = 0; i<7; i++) {
dates.push({ weekDay: dayOfWeek.format('dd'), shortDate: dayOfWeek.format('DD.MM'), date: dayOfWeek.format() });
dayOfWeek.add(1, 'd');
}
return dates;
};
The problem I'm facing is that I'm not able to animate during the dates update. As intended it would be very cool if the dates could slide either left or right. I did try to achieve this with ng-animate but I couldn't figure out how to.
Here's a basic example of the date picker: https://plnkr.co/edit/4Oz0RBvJafiTm6ZAfidt?p=preview
Any ideas on how to get this to work?
Regards and thanks in advance
Lukas

Answer 1

Sometimes using angular-animate can be tricky. Looking at your markup I'm assuming you want to slide each radio button individually (maybe to throw in some staggering effects). The problem with angular-animate it does not maintain the order of the items in the list that are marked as ng-leave. In this case the (to be deleted) items are appended to the end of the <ul><li></li></ul>, which screws the relative position.
Have a look into this plunker. I've quickly eyeballed the styling from the image, so you'll probably want to tweak it a bit.
Cheers.