javascript - ngAnimate 的离开回调的速度动画

Question

我试图让离开动画与速度和 Angular 一起工作，以便当表格行离开时它们会向右移动。

在示例中，我使用离开回调来尝试动画离开 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 的项目将触发进入动画。

解决方案是跳过跟踪或按与对象实际相关的属性(例如唯一 ID)进行跟踪。如果您的集合仅包含字符串并且您需要支持重复项，则需要将它们包装在对象中，例如:

{ value: 'item1' }

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