angularjs 1.3 javascript动画可以在ng-repeat上使用，但不能在ng-if上使用
[英]angularjs 1.3 javascript animation works on ng-repeat but not ng-if
问题描述
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. 
我试图在angularJS中模拟一些标准的js代码（使用jQuery），以便进行大多数实践，但是我对angularJS代码的简单程度感到满意。
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: 当我将其应用于ng-repeat-start时，动画效果很好，并且元素从顶部滑入视图即可显示：
<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. 但是，当我将其应用于ng-if（在ng-repeat-end内）时，该元素根本不会显示自身。 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? 请有人能告诉我为什么angularJS javascript动画可以在ng-repeat-start上工作，而不在ng-if上工作吗？
btw - inline style is used here simply to demonstrate the problem; btw-内联样式仅用于演示问题； I don't use inline styles in dev, let alone production! 我不在开发人员中使用内联样式，更不用说生产了！
1 个解决方案
解决方案1
4 已采纳 2014-11-10 21:30:27
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. 但是，您可以在父容器元素上使用属性ng-animate-children覆盖此属性。
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>
Demo: http://plnkr.co/edit/vsvMdr3DZJqQRpG8SPzx?p=preview 演示： http ： //plnkr.co/edit/vsvMdr3DZJqQRpG8SPzx？p = preview
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.