Geek Answers Handbook

Using AngularJS 'ngAnimate when removing an object from scope

Very simple question: In AngularJS 1.2.x it possible (and how) to get ngAnimate when an item is removed from scope?

Here is a Plunker example:

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

the code:

  <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:

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

As you can see, pressing the DELETE button launches splice() on $scope.imgs . I would like to revive it, and not just disappear. I use transitions only copied and pasted from this year 's article in Moo , which works fine when filtering a scope, but obviously not when deleting from a scope.

+7
javascript angularjs ng-animate angularjs-animation
source share
1 answer

Make sure the app includes ngAnimate as a dependency, after angular.js angular-animate.js file is angular-animate.js and this animation example is added to your 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; }

This will enliven both additions and deletions from imgs .

+9
source share

More articles:


All Articles