ng-enter-stagger动画不起作用

问题描述：

我实际上试图动画由ng-repeat创建的div列表。ng-enter-stagger动画不起作用

我希望他们一个一个出现。所以我看到我可以使用ng-enter-stagger，但它不起作用。

这里是我的CSS：

.newsLeft.ng-enter{ 
    -webkit-transition:all linear 0.5s; 
    transition: all linear 0.5s ; 
    opacity:0; 
} 

.newsLeft.ng-enter-stagger{ 
    -webkit-transition-delay:2s; 
    transition-delay:2s; 

    -webkit-transition-duration:0s; 
    transition-duration:0s; 
} 

.newsLeft.ng-enter.ng-enter-active{ 
    opacity:1; 
}

这里的HTML：

<div ng-repeat="news in newsList" class="newsLeft" animate-on-load> 
    <div class="newsComponent" animate-on-load> 
    <hr/> 
    <div class="newsDate">{{news.date}}</div> 
    <div class="newsSubT2">{{news.title}}</div> 
    <div>{{news.content}}</div> 
    </div> 
</div>

AngularJS版本？ – tasseKATT

角1.4.4。角度版本可能是问题？ –

不确定。你能展示一些HTML吗？ – tasseKATT

答

的问题是animate-on-load指令，所以删除。

结构动画在视图更改后的第一个或第二个摘要循环中默认处于禁用状态。您可以在父元素上使用ng-animate-children="true"来覆盖此设置。

例如：

<body ng-animate-children="true"> 
    <div ng-view></div> 
</body>

演示：http://plnkr.co/edit/AqSt7jaLk0Nq0RKqvdhx?p=preview

注意，这可以在视图中触发其他的动画（例如，用于ng-show）。

如果只想为ng-repeat动画您可以使用ng-if这样的：

<div ng-repeat="news in newsList" class="newsLeft" ng-if="ready"> 
    ... 
</div>

和Controller：

$timeout(function() { 

    $scope.ready = true; 
});

我从来没有听说过有生命的孩子！我的错。非常感谢你的帮助 –

不要感觉不好，不经常提及。我在我的答案中添加了一个小更新。欢迎您:) – tasseKATT

ng-enter-stagger动画不起作用

相关推荐