在AngularJS中更新數組時滑動動畫

我正在開發基於AngularJS的日期選擇器。的HTML是相當簡單：在AngularJS中更新數組時滑動動畫

<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

如何得到這個工作任何想法？

的問候和感謝提前盧卡斯

來源

2016-01-05 Lukas

你可以在Plunker中複製嗎？幫助會容易得多。 – tasseKATT

我做了一個基本的實現：https://plnkr.co/edit/4Oz0RBvJafiTm6ZAfidt?p=preview – Lukas

有時使用angular-animate可能會非常棘手。看着你的標記，我假設你想單獨滑動每個單選按鈕（也許會引入一些令人驚歎的效果）。 angular-animate的問題不會維護列表中標記爲ng-leave的項目的順序。在這種情況下，（將被刪除的）項目被追加到<ul><li></li></ul>的末尾，這將螺絲擰緊相對位置。

看看這個plunker。我已經很快從圖像中識別出了造型，所以你可能會想調整一下。

乾杯。

來源

2016-01-06 11:53:51 null

嘿，這太棒了！我甚至不能夠感謝你！太酷了，TNX很多幫助！ – Lukas

在AngularJS中更新數組時滑動動畫

回答

相關問題