angularjs - 如何突出显示 ng-repeat 项目

Question

如何突出显示添加到使用 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">

Answer 1

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/