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

Question

如何突出显示添加到使用 ng-repeat 显示的列表中的最新项目？我曾尝试effect()在我的addItem()函数中使用 jquery，但没有奏效。我也尝试过使用 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 从 1.1.4 版本开始支持动画。

只需添加ng-animate到您li的 s，并带有动画名称：

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

这是小提琴：http: //jsfiddle.net/u4Tnw/

---

您不仅限于突出显示。你可以做各种疯狂的动画。

这是一个更疯狂的例子：http: //jsfiddle.net/u4Tnw/3/