Ускоренная анимация для обратного вызова ngAnimate

Question

Я пытаюсь получить анимацию отпуска, работающую со скоростью и угловым, так что, когда строки в таблице останутся, они перемещаются вправо.

В примере я использую обратный вызов leave, чтобы попытаться оживить уход ng-repeat, но обратный вызов работает, однако ничего не происходит!

angular.module('myApp', ['ngAnimate']) 
 
    .controller('myCtrl', function($scope) { 
 
    $scope.items = ['item1', 'item2', 'item3'] 
 
    
 
    $scope.shiftItems = function() { 
 
    var items = ['asdf', 'bill', 'bob', 'joe', 'items'] 
 
     
 
    for (var i = 0; i < $scope.items.length; i++) 
 
     $scope.items.shift() 
 
     
 
    for (var i = 0; i < items.length; i++) 
 
     $scope.items.push(items[i]) 
 
    } 
 
    }) 
 

 
.animation('.velocity-tableSlideInOut', [function() { 
 
    return { 
 
     enter: function(element, done) { 
 
     Velocity(element, 'transition.slideLeftIn', [0.36, 0.96, 0.6, 0.96]) 
 
     }, 
 

 
     leave: function(element) { 
 
     Velocity(element, {opacity: 0}, [0.4, 0.04, 0.64, 0.04]) 
 
     } 
 
    } 
 
    }])

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.js"></script> 
 
<div ng-app='myApp'> 
 
    <ul ng-controller='myCtrl'> 
 
    <li class='velocity-tableSlideInOut' ng-repeat='item in items track by $index'> 
 
     {{item}} 
 
    </li> 
 
    <li> 
 
     <button ng-click='shiftItems()'>Reorder</button> 
 
    </li> 
 
    </ul> 
 
    
 
    
 
</div>

Answer 1

Это фактически ожидаемое поведение при использовании track by $index.

Вы начинаете с 3-х пунктов и индексы будут:

0 1 2 

Вы удалите эти 3 вещи, добавлять новые пункты 6 и теперь имеют индексы:

0 1 2 3 4 5 

Индекс не оставил, поэтому анимация отпуска не будет запущена. Однако есть 3 новых индекса, поэтому анимация ввода будет активирована для предметов с индексами 3, 4 и 5.

Решение состоит в том, чтобы либо пропустить track by, либо отслеживать свойство, которое фактически связано с объектом, например уникальный идентификатор. Если ваша коллекция содержит только строки, и вы должны поддерживать дубликаты вам нужно будет обернуть их в объекты, например:

{ value: 'item1' } 

Demo: http://plnkr.co/edit/tRZ7L0CAfFMKgSSyyYk5?p=preview