Question

我试图在angularJS中模拟一些标准的js代码（使用jQuery），主要用于练习，但我对angularJS代码的简单程度感到满意。

但是，我遇到动画问题：

angular.module('app').animation('.slideDown', function() {
    return {
        enter: function (element, done) {
            jQuery(element).slideDown(2500);
        }
    }
});

当我将它应用于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>

然而，当我将它应用于ng-if（在ng-repeat-end中）时，该元素根本不会显示出来。如果我拿出＆＃34; display：none;＆＃34;元素出现在页面上（没有表现性的耀斑）：

    <div data-ng-repeat-end>
        <div class="slideDown" data-ng-if="($index+1)%6==0" style="display: none;">
            [content...]
        </div>
    </div>

请有人告诉我为什么angularJS javascript动画在ng-repeat-start中起作用，但在ng-if上却没有？

btw - 这里使用内联样式来简单地说明问题;我不会在开发中使用内联样式，更不用说制作了！

Answer 1

默认情况下，在父动画完成之前，不能对子元素进行动画处理。但是，您可以在父容器元素上使用属性ng-animate-children来覆盖它。

例如：

<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>

演示： http://plnkr.co/edit/vsvMdr3DZJqQRpG8SPzx?p=preview

angularjs 1.3 javascript动画适用于ng-repeat但不适用于ng-if

1 个答案: