1

私は単純なプロセスのように見えることをしようとしています: HTTP リクエストから受け取ったアイテムのリストをアニメーションで表示します。

まず第一に、これが私のやり方です（私はより良い角度でそれを行うための提案を受け入れています）：

  • stateコントローラーで初期化するスコープ変数を定義し、HTTP 要求からデータを受信したときにloading変更します。loaded
  • 受信したデータでスコープ変数を初期化しitemsます。
  • 私の見解ではng-switch、州とng-repeatアイテムで使用します。
  • css on でアニメーションを定義しますng-repeat。

これがplunkr です( request の代わりに $timeout を使用)。

アニメーションが機能しない理由がわかりません。

どんな助けでも大歓迎です。ありがとう。

4

2 に答える 2

1

ブロック.ng-enter内の繰り返しアイテムに追加されないのは、角度の「機能」のようです。ng-switch-when削除すると機能します（アイテムがない場合は何もng-switch-when="loaded"しないので、実際には必要ありません）ng-repeat

<div ng-switch="state">
  <div ng-switch-when="loading">
    <p>Please wait...</p>
  </div>
  <div >
    <ul ng-repeat="item in items" class="animate-items">
      <li>{{item}}</li>
    </ul>
  </div>
</div>

http://plnkr.co/edit/ocEj7BSQPSeIdnnfAOIE?p=preview

于 2013-11-29T21:51:42.053 に答える
1

それが起こっている理由は、あなたのng-when. で同じことが起こりますがng-if、 を使用すると問題なく動作しますng-show。

問題は、ng-when条件が true を返したときに、ng-when最初にコンテンツがデタッチされた dom にレンダリングされることです (したがって、アニメーションは発生しません)。次に、この dom が dom ツリーにアタッチされます (このステップはアニメーション化されますが、アニメーション クラスを ng-when に配置する必要があります)。

dom は常に接続されているため (単に表示/非表示になっているため)、何かのようなものを使用するとng-show、期待どおりに動作します。ng-hide

これは、バグまたは ng-animate の制限と見なされる可能性があります。github の問題を投稿して、角度のある人が考えているかどうかを確認することをお勧めします。

于 2013-11-29T21:21:52.080 に答える