2

Staggering Animations are great! But I don't get it to work without user interaction.

There is a total normal ng-repeat list:

<div ng-controller="controller">    
    <div class="category" ng-repeat="category in categories">
      {{category}}
    </div>
</div>

Defined in a controller:

var controller = function($scope) {
  $scope.categories = ['12345', '6789', '9876', '54321'];
};

And a few CSS Rules for animation:

.category.ng-enter {
  -webkit-transition: 2s linear all;
  transition: 2s linear all;
  opacity:0;
}
.category.ng-enter-stagger {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}
.category.ng-enter.ng-enter-active {
  /* standard transition styles */
  opacity:1;
}

But on page load its displayed without animation. I inserted a button for replacing the categories array with random numbers and it fades in just fine.

What do I have to do to get the animation to work, when the user visits the page the first time?

Demo is here: http://plnkr.co/edit/3zXENPbYA3cxJQ3Pyb34?p=preview

I found some answers that hacking around with $timeout() but I get an animation only on the first item. And it don't feel well.

paul
  • 488
  • 5
  • 16

2 Answers2

5

It's by design that the animation is disabled while bootstraping, see: #5130.

There is a workaround (a dirty hack) provided in a comment by lioli to enable animation on page load.

Put this line at the beginning of your controller (do not forget to inject the $rootElement).

$rootElement.data("$$ngAnimateState").running = false;

Example Plunker: http://plnkr.co/edit/9ZZ3JBOCaRJ41ssczX6l?p=preview

For the issue that you get an animation only on the first item. It's been reported that this is a bug that happens only with a minified version of angular-animate i.e. angular-animate.min.js.

In the plunker above, I've changed to an unminified angular-animate.js and it seems to work fine.

For more detail of the issue, see: #8297 and #7547

runTarm
  • 11,537
  • 1
  • 37
  • 37
  • Thanks for your great answer! `$rootElement.data()...` works for me. Still not the cleanest solution, but I like it more than `$timeout()` work arounds. – paul Aug 04 '14 at 14:39
  • 2
    This doesn't seem to work on angular 1.4. See http://stackoverflow.com/questions/31193836/nganimate-on-page-load-hack for another solution. – Ryan Hendry Aug 06 '15 at 12:10
1

Another option besides @runTarm's answer would be to fill the data in after the intial load. Something as simple as:

$scope.items = [];

var items = 'abcdefghijklmnopqrstuvwxyz'.split("");

$timeout(function() {
  $scope.items = items;  
}, 0);

Modified plunkr example

Austin Thompson
  • 2,251
  • 1
  • 17
  • 23
  • I will use runTarm's answer, wrap it in a service and then its an clean und rememberable solution. Hopefully. Thanks for your suggestion. – paul Aug 04 '14 at 14:42