Menu
I have list of messages create 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 look 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 the messages and remove them? I know how to do that in jQuery but how can I do this using AngularJS way?
JSFiddle
220
Start from AngularJS 1.1.4, the ngAnimate directive is added to support the animation.
You can achieve it like this:
<ul ng-repeat="message in messages" ng-animate="'animate'">
<li>{{message.message}}</li>
</ul>
And this is the css needed:
.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
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
