2

ng-repeat で表示されるリストに追加された最新の項目を強調表示するにはどうすればよいですか? 関数でjqueryeffect()を使用しようとしましたが、うまくいきませんでした。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">
4

1 に答える 1

9

Angular はバージョン 1.1.4 からアニメーションをサポートしています。

アニメーション名を付けて s に追加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/

于 2013-05-21T01:23:50.963 に答える