在AngularJS中更新数组时滑动动画

Question

我正在开发一个基于AngularJS的日期选择器。 HTML非常简单：

<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>

样式正确，这给我这样的东西

日期在控制器中即时生成，并且仅生成7个日期。一旦我向左或向右单击，计算下七个日期，阵列就会更新，GUI也会刷新新日期。到目前为止一切都很好。

控制器如下所示：

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;
};

我遇到的问题是我无法在更新日期期间制作动画。按照预期，如果日期可以向左或向右滑动将是非常酷的。我确实尝试用ng-animate实现这个目标，但我无法弄清楚如何使用。

以下是日期选择器的基本示例：https://plnkr.co/edit/4Oz0RBvJafiTm6ZAfidt?p=preview

有关如何使其发挥作用的任何想法？

提前问候并表示感谢 卢卡斯

Answer 1

有时使用angular-animate可能会非常棘手。看看你的标记，我假设你想单独滑动每个单选按钮（可能会产生一些惊人的效果）。问题angular-animate它不会维护列表中标记为ng-leave的项目的顺序。在这种情况下，（待删除）项目被附加到<ul><li></li></ul>的末尾，这会使相对位置变得紧张。

查看此plunker。我很快就从图像中剔除了样式，所以你可能想稍微调整一下。

干杯。