Question

非常简单的问题：在AngularJS 1.2.x中，从范围中移除项目时，是否有可能（以及如何）触发ngAnimate？

以下是Plunker的一个例子：

http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview

代码：

  <body ng-controller="MainCtrl">  
      <div ng-repeat="img in imgs" class="my-repeat-animation">
        <img ng-src="{{img}}" />
        <button class="btn btn-primary" ng-click="remove(img)">DELETE</button>
      </div>
  </body>

脚本：

app.controller('MainCtrl', function($scope) {
     $scope.imgs = ['http://cache.mrporter.com/images/products/362812/362812_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/362807/362807_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/364762/364762_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/357020/357020_mrp_in_l.jpg']
     $scope.remove = function(image){
       var index = $scope.imgs.indexOf(image);
       $scope.imgs.splice(index,1);
     }
});

如您所见，点击“删除”按钮会在splice()上运行$scope.imgs。我想动画这个，而不是让它消失。我正在使用仅从this Year Of Moo article复制粘贴的过渡，这在过滤范围时效果很好，但显然不适用于从范围中删除。

Answer 1

确保app包含ngAnimate作为依赖项，文件angular-animate.js在angular.js之后加载，并将此示例动画添加到您的CSS中：

/* Add animation */
.my-repeat-animation.ng-enter.ng-enter-active, 
.my-repeat-animation.ng-leave {
    opacity: 1;
    -webkit-transition: opacity 300ms linear;
    -moz-transition: opacity 300ms linear;
    transition: opacity 300ms linear;
}

/* Remove animation */
.my-repeat-animation.ng-leave.ng-leave-active, 
.my-repeat-animation.ng-enter {
    opacity: 0;
    -webkit-transition: opacity 300ms linear;
    -moz-transition: opacity 300ms linear;
    transition: opacity 300ms linear;
}

这将为imgs的添加和删除添加动画。

从范围中删除项目时使用AngularJS的ngAnimate

1 个答案: