All geek questions in one place

How to fade and remove items created by ng-repeat

I have a list of posts created using:

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

and my ng-HTML looks like this:

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

How can I fadeout messages and delete them? I know how to do this in jQuery, but how can I do this using AngularJS?

Jsfiddle

+7
source share
1 answer

Start with AngularJS 1.1.4, the ngAnimate directive has been added to support animation.

You can achieve this as follows:

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

And this is needed css:

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

Working demo

+3
source

Source: https://habr.com/ru/post/952875/

More articles:


All Articles