Cómo desvanecerse y eliminar elementos creados por ng-repeat

Tengo list de posts crear utilizando:

var messages = ["Foo Bar", "Lorem Ipsum", "Dolor Sit Amet"]; app.controller('fooControler', function($scope) { $scope.messages = [ {"message": "Hello There"} ]; function insert() { var random = Math.round(Math.random()*(messages.length-1)); var message = messages[random]; messages.splice(random, 1); $scope.$apply(function() { $scope.messages.push({message: message}); }); if (messages.length) { setTimeout(insert, 5000); } } setTimeout(insert, 5000); }); 

y mi ng-html se ve así:

 <html ng-app="app"> <body ng-controller="fooControler"> <header> <div>You have {{messages.length}} messages</div> <ul ng-repeat="message in messages"> <li>{{message.message}}</li> </ul> </header> </body> </html> 

¿Cómo puedo desvanecer los posts y eliminarlos? Sé cómo hacer eso en jQuery, pero ¿cómo puedo hacerlo usando Angular?

JSFiddle

Comience desde AngularJS 1.1.4, la directiva ngAnimate se agrega para respaldar la animation.

Puedes lograrlo así:

 <ul ng-repeat="message in messages" ng-animate="'animate'"> <li>{{message.message}}</li> </ul> 

Y este es el CSS necesario:

 .animate-enter-setup, .animate-leave-setup { -webkit-transition: 1s linear all; /* Safari/Chrome */ -moz-transition: 1s linear all; /* Firefox */ -ms-transition: 1s linear all; /* IE10 */ -o-transition: 1s linear all; /* Opera */ transition: 1s linear all; /* Future Browsers */ } .animate-enter-setup { opacity: 0; } .animate-enter-setup.animate-enter-start { /* The animation code itself */ opacity: 1; } .animate-leave-setup { opacity: 1; } .animate-leave-setup.animate-leave-start { /* The animation code itself */ opacity: 0; } 

Demo de trabajo