Romain Bouvet Romain Bouvet - 6 months ago 181
CSS Question

ng-enter-stagger animation is not working

I'm actually trying to animate a list of div created by ng-repeat.

I want them to appear one by one. So I saw I could use ng-enter-stagger but it's not working.

Here's my 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;
}


Here's the 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>

Answer

The problem is the animate-on-load directive, so remove that.

Structural animations are by default disabled during the first one or two digest cycles after a view has been changed. You can override this by using ng-animate-children="true" on a parent element.

For example:

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

Demo: http://plnkr.co/edit/AqSt7jaLk0Nq0RKqvdhx?p=preview

Note that this may trigger other animations in the view (for example for ng-show).

If you only want the animations for the ng-repeat you can use ng-if like this:

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

And in the controller:

$timeout(function () {

  $scope.ready = true;
});
Comments