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.
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);
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.