I'm trying to emulate some standard js code (with jQuery) in angularJS, for practice mostly, but I am pleased with how much simpler the angularJS code is.
However, I have a problem with an animation:
angular.module('app').animation('.slideDown', function() {
return {
enter: function (element, done) {
jQuery(element).slideDown(2500);
}
}
});
When I apply this to an ng-repeat-start the animation works just fine and the element reveals by sliding into view from the top:
<div class="slideDown" data-ng-repeat-start="c in vm.things" style="display: none;">
<div class="panel panel-default">
[content...]
</div>
</div>
However, when I apply it to an ng-if (within the ng-repeat-end) the element doesn't reveal itself at all. If I take out the "display: none;" the element appears on the page (with no presentational flare):
<div data-ng-repeat-end>
<div class="slideDown" data-ng-if="($index+1)%6==0" style="display: none;">
[content...]
</div>
</div>
Please can someone tell me why the angularJS javascript animation works in the ng-repeat-start, but not on the ng-if?
btw - inline style is used here simply to demonstrate the problem; I don't use inline styles in dev, let alone production!
By default child elements cannot be animated until the parent's animation has completed. You can however use the attribute ng-animate-children on a parent container element to override this.
For example:
<body ng-controller="MyController" ng-animate-children>
<div class="slideDown" data-ng-repeat-start="c in vm.things" style="display: none;">
<div class="panel panel-default">
[Fizz...]
</div>
</div>
<div data-ng-repeat-end>
<div class="slideDown" data-ng-if="($index+1)%3==0" style="display: none;">
[Buzz...]
</div>
</div>
</body>