使用AngularJS的ngAnimate在从作用域中移除项目时

Question

使用AngularJS的ngAnimate在从作用域中移除项目时

javascriptangularjsng-animateangularjs-animation

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);
     }
});

正如您所见，单击“DELETE”按钮会在$scope.imgs上运行splice()。我想对此进行动画处理，而不是让它简单地消失。我正在使用从this Year Of Moo article复制和粘贴的过渡效果，当过滤范围时它可以很好地工作，但显然在从范围中删除时无法工作。

- JVG

我认为这不是指向正确 Plunker 的链接。 - lex82

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Blaise · Accepted Answer

请确保app作为依赖项包含ngAnimate，在angular.js文件后加载angular-animate.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的添加和移除都提供动画效果。