对 'enter' 事件进行 ngRepeat 的子元素的动画处理。如何避免数据初始化的动画？

Question

// please refer to the jsfiddle link below for the complete code.

这是jsfiddle。基本上，动画只是按照我想要的方式工作，但我不希望它发生在数据初始化中。我该怎么办？

我更喜欢看到一种处理这种情况的正确方法，而不是像在angularjs控制器中访问DOM对象这样的黑客。

更新 1：

我尝试使用ngClass在动画上安装一个开关，我喜欢它的简单性。然而，问题是这种方法仅在使用 ngRepeat 指令将动画应用于元素时才以某种方式起作用，但在这种特定情况下，我需要动画发生在 ngRepeat 的子元素上。

Answer 1

我正在使用$watch在加载数据时触发动画，这是一个使用ng-show的基本示例

.HTML

<div ng-show="load"></div>

控制器

function myCtrl($scope, $timeout) {
$scope.load = true; 
$timeout(function() {
    $scope.users = [
        {name: 'George', age: 20},
        {name: 'Tom', age:21},
        {name: 'Feeling', age:22}
    ];
 $scope.load = false;
}, 1000);
$scope.addRow = function(){
    $scope.users.push({name: 'New user', age: null});
};

}

命令

app.directive( 'afterLoadedAnimation', function() {
return { 
    scope : true,
    link : function ( $scope, element, attributes ){
        $scope.$watch( 'load', function ( newVal, oldVal ){
             if( newVal !== oldVal ){
                 // Trigger the animation
               }
            });
      }
 });

Answer 2

您可以使用

ng-class来设置仅在user.name == 'New User'时才存在的"新"类。然后仅将动画应用于具有"new"类的用户。例如：

<div class="user-name" style="display:inline-block" ng-class="{new: user.name == 'New user'}">

然后在你的 CSS 中，

.user-entry.ng-enter .new {
    background: #5da423;
}

此处修复：http://jsfiddle.net/NKa3m/