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

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

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

更新 1:

我尝试过使用ngClass来实现动画的开关,我喜欢它的简单性。然而,问题是这种方法仅在动画应用于带有ngRepeat指令的元素时才有效,但在这种特殊情况下,我需要动画发生在的子元素上ngRepeat

4

2 回答 2

0

$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

               }

            });
      }
 });
于 2014-02-11T20:05:38.090 回答
0

您可以使用ng-class来设置仅在user.name == 'New User'. 然后仅将动画应用于具有“新”类的用户。例如:

<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/

于 2014-02-11T20:10:58.960 回答