Staggering Animations are amazing! However, I'm struggling to make them work without any user interaction.
I have a simple ng-repeat list:
<div ng-controller="controller">
<div class="category" ng-repeat="category in categories">
{{category}}
</div>
</div>
This is how it's defined in the controller:
var controller = function($scope) {
$scope.categories = ['12345', '6789', '9876', '54321'];
};
Along with some CSS rules for the 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;
}
Unfortunately, the animation does not play when the page loads. I tried adding a button to replace the categories array with random numbers, and then the animation works fine.
How can I make the animation work when a user first visits the page?
You can see a demo here: http://plnkr.co/edit/3zXENPbYA3cxJQ3Pyb34?p=preview
I've read suggestions about using $timeout() but that only resulted in an animation on the first item, which doesn't feel right.