ng-enter-stagger 动画不起作用
ng-enter-stagger animation is not working
我实际上是在尝试为 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>
问题是 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;
});
我实际上是在尝试为 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>
问题是 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;
});