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 内) に適用すると、要素自体がまったく表示されません。「display: none;」を取り出すと 要素がページに表示されます (プレゼンテーションのフレアはありません)。

    <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 に答える