我有使用以下方法创建的消息列表:
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);
});
我的 ng-html 看起来像这样:
<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>
如何淡出消息并将其删除？我知道如何在 jQuery 中执行此操作，但如何使用 AngularJS 方式执行此操作？
最佳答案
从 AngularJS 1.1.4 开始，ngAnimate添加指令以支持动画。
你可以这样实现:
<ul ng-repeat="message in messages" ng-animate="'animate'">
<li>{{message.message}}</li>
</ul>
这是需要的 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;
}
关于javascript - 如何淡出和删除由 ng-repeat 创建的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18547420/