7

非常简单的问题：在从范围中删除项目时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. 我想对此进行动画处理，而不是让它消失。我正在使用刚刚从这个 Moo 年文章中复制和粘贴的转换，它在过滤范围时效果很好，但在从范围中删除时显然不行。

4

1 回答 1

9

确保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.

于 2013-12-02T11:17:37.903 回答