Sliding animation when updating an array in 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

Can you replicate in a Plunker? Would be much easier to help. — tasseKATT
– tasseKATT, Commented Jan 5, 2016 at 16:15
i did a basic implementation of it: plnkr.co/edit/4Oz0RBvJafiTm6ZAfidt?p=preview — Lukas
– Lukas, Commented Jan 5, 2016 at 21:14

null · Accepted Answer · 2016-01-06 11:53:51Z

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.

answered Jan 6, 2016 at 11:53

null

7,9163 gold badges39 silver badges38 bronze badges

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

1 Comment

Lukas Over a year ago

Hey this is awesome! I can not even thank you enough! So cool, tnx a lot for assistance!

Collectives™ on Stack Overflow

Sliding animation when updating an array in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related