1

我正在尝试在 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 内）时，该元素根本不会显示自己。如果我取出“显示：无；” 元素出现在页面上（没有表现耀斑）：

    <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 中无效？

顺便说一句 - 这里使用内联样式只是为了演示问题；我不在开发中使用内联样式，更不用说生产了！

4

1 回答 1

4

默认情况下，在父动画完成之前，子元素不能动画。但是，您可以使用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

于 2014-11-10T21:30:27.120 回答