非常简单的问题:在 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);
}
});
如您所见，单击“删除”按钮会在 $scope.imgs 上运行 splice()。我想对此进行动画处理，而不是让它简单地消失。我正在使用从 this Year Of Moo article 复制粘贴的过渡效果这在过滤范围时工作得很好，但在从范围中删除时显然不行。
最佳答案
确保 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 添加和删除动画。
关于javascript - 从范围中删除项目时使用 AngularJS 的 ngAnimate，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19922463/