Question

如何突出显示添加到使用ng-repeat显示的列表中的最新项目？我已尝试在effect()函数中使用jquery addItem()，但这不起作用。我也尝试过使用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;
}

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

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

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

如何突出显示重复项目

1 个答案: