Question

下面的代码通过使用ngRepeat在无序列表中显示了一系列位置。

<ul>
  <li ng-repeat="loc in locList track by loc.id">{{loc.name}}</li>
</ul>

用户可以在列表中添加更多位置，一次一个。我希望能够为<li>元素分配一个临时CSS类，该元素对应于新添加到数组的位置。 CSS类用于通过更改元素的背景颜色来向用户指示新添加的元素，因此CSS类将持续大约一秒钟。我想不出用AngularJS来实现这个目标的任何方法。有什么想法吗？

Answer 1

Fiddle

这与角度无关，而与css动画有关。但是这是一个有效的例子

JS：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.list = [];

    $scope.addItem = function(){
        $scope.list.push({ name: 'item#' + $scope.list.length });
    };
}

HTML;

<div ng-controller="MyCtrl">
    <button ng-click="addItem()">Add item</button>
    <ul>
        <li class="anim" ng-repeat="item in list">{{ item.name }}</li>
    </ul>
</div>

CSS：

@-webkit-keyframes myfirst /* Safari and Chrome */
{
   from {background: red;}
   to {background: none;}
}

.anim {
    -webkit-animation: myfirst 5s;
}

每件商品都会在创作时展示动画。颜色从红色渐变为无，表示最新项目。

Answer 2

要将类添加到刚添加到ngRepeat列表中的元素，则可以定义自定义动画。即使您没有要求执行转换，动画也会提供钩子以响应添加到此类列表中的项目（以及其他内容）。你需要的是“输入”动画。假设您有关于每个项目的课程my-list-item

<li class="my-list-item" ng-repeat="item in chosenItems track by item.id">{{item.name}}</li>

然后，您可以在enter上定义.my-list-item动画。所有这一切都是添加一个类，在本例中为just-added，然后在一秒之后删除它。

app.animation('.my-list-item', function($timeout) {
  return {
    enter : function(element, done) {
      element.addClass('just-added');
      $timeout(function() {
        element.removeClass('just-added');
        done();
      },1000);
    }
  };
});

添加具有类my-list-item的项目时的角度通知，然后运行enter动画。您可以在this plunkr中查看此操作。你也可以read up on Angular animations。您需要包含ngAnimate模块才能工作。

如果您不需要实际添加类，并且只需要更改CSS，并且定位支持它的浏览器，那么使用CSS过渡/变换/动画/关键帧动画可能会更好。

Answer 3

因为我不喜欢这种用途的CSS动画，所以我给你这个小小提琴：http://jsfiddle.net/DotDotDot/FhDY8/1/
它只是基于范围变量和添加新项目时调用的$ timeout服务（我假设你在控制器中调用了一个函数）在HTML方面，我添加了一个ng-class属性，基于新创建的变量

<li ng-class='{last:lastInserted==loc.name}' ng-repeat="loc in locList track by loc.id">{{loc.name}}</li>

在控制器端我做了这个，重要的部分是在$ timeout

中调用的函数

    .controller('ctrl', function($scope, $timeout){
   $scope.locList=[{id:1,name:"loc1"},{id:2,name:"loc2"},{id:3,name:"loc3"},{id:4,name:"loc4"}]
   $scope.lastInserted="";
   $scope.addLoc=function(){
       $scope.locList.push({id:$scope.locList.length+1,name:$scope.newLoc});   
       $scope.lastInserted=$scope.newLoc;
       $scope.newLoc="";
       $timeout(function(){
                $scope.lastInserted="";
            }, 2000)
   }
});

当您单击将项目添加到列表中时，该名称将复制到ng-class中使用的变量，这使该类对您插入的最后一项有效。此时，我延迟一个动作（使用$ timeout），这将简单地改变ng-class比较中的值，因此angular将自动删除该类，该类仅在稍微延迟期间停留（在我的示例中为2秒）< / p>

希望它有所帮助

玩得开心

将临时CSS类分配给DOM元素，该元素通过使用ngRepeat对应新添加的数组元素

3 个答案: