I have a basic question: How can I utilize ngAnimate in AngularJS 1.2.x to trigger animations when removing an item from the scope?
Here is an example Plunker for reference:
http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview
Code snippet:
<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>
Script section:
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);
}
});
When clicking the "DELETE" button, the splice() method is executed on $scope.imgs. I am looking to add animation effects to this process instead of having the item simply disappear. The transitions used are directly taken from a tutorial on Year Of Moo article, which works well during scope filtering but not while removing items from the scope.