ng-enter-stagger 动画不起作用

【问题标题】：ng-enter-stagger animation is not workingng-enter-stagger 动画不起作用
【发布时间】：2016-09-09 16:40:28
【问题描述】：

我实际上是在尝试为 ng-repeat 创建的 div 列表设置动画。

我希望它们一一出现。所以我看到我可以使用 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 版本？
角度 1.4.4。 Angular 版本可能是问题所在？
不确定。你能显示一些 HTML 吗？
你注入了'ngAnimate'模块吗？
我做了但没用：/

标签： css angularjs ng-animate

【解决方案1】：

问题是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>

在控制器中：

$timeout(function () {

  $scope.ready = true;
});

【讨论】：

我从未听说过动画儿童！我的错。非常感谢您的帮助
别心疼，不常被提及。我对我的答案添加了一个小更新。欢迎你:)