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>

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

日期是在控制器中即时生成的，当时只生成了七个。一旦我向左或向右单击，就会计算接下来的七个日期，数组会更新，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。我很快就注意到了图片中的样式，因此您可能需要稍微调整一下。

干杯。

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

Sliding animation when updating an array in AngularJS

angularjs

angularjs-ng-repeat

ng-animate