如何突出显示添加到使用 ng-repeat 显示的列表中的最新项目?我试过在我的 addItem()
函数中使用 jquery effect()
但这没有用。我也尝试过使用 angular-ui 的高亮过滤器但没有成功。
//controller
$scope.addItem = function() {
$scope.items.unshift($scope.item);
};
//html
<ul class="media-list">
<li class="media" ng-repeat="item in items | highlight:item">
最佳答案
Angular has been supporting animations since version 1.1.4 .
只需将 ng-animate
添加到您的 li
中,并使用动画名称:
<li ng-animate="'highlight'" ng-repeat="item in items">{{ item }}</li>
并为该动画名称提供适当的动画 CSS:
li {
-webkit-transition: all 2s 1.5s ease-out;
-moz-transition: all 1.5s ease-out;
transition: all 1.5s ease-out;
}
.highlight-enter-setup {
background: yellow;
}
.highlight-enter-start {
background: white;
}
这是 fiddle :http://jsfiddle.net/u4Tnw/
您不仅限于突出显示。您可以制作各种疯狂的动画。
这是一个更疯狂的例子:http://jsfiddle.net/u4Tnw/3/
关于angularjs - 如何突出显示 ng-repeat 项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16660453/