AngularJS动画ng切换ng重复

Question

我正在尝试做一个看起来很简单的过程：用动画显示从HTTP请求接收的项目列表。

首先，这是我的做法（我愿意接受任何以更好的角度进行的建议）：

• 我定义了一个作用域变量state，我在控制器中将其初始化为loading，当我从HTTP请求接收数据时，我将其更改为loaded
• 我用接收到的数据初始化作用域变量items
• 在我看来，状态使用ng-switch，项目使用ng-repeat
• 我在ng-repeat上用css定义了一个动画

这是一个plunkr（用$timeout代替请求）。

我不明白为什么动画不起作用。

任何帮助都将不胜感激。谢谢

Answer 1

发生这种情况的原因是因为您的ng-when。ng-if也会发生同样的情况，但如果使用ng-show，效果会很好。

问题是，当ng-when条件返回true时，ng-when首先在未匹配的dom中呈现其内容（因此不会发生动画）。然后，这个dom被附加到dom树（这一步是动画化的，但你必须把你的动画类放在ng上）。

当使用像ng-show或ng-hide这样的东西时，事情会按预期进行，因为dom总是附加的（只是显示/隐藏）。

这可能被认为是一个bug或ng动画的限制，你可能想发布一个github问题，看看棱角分明的家伙是否有任何想法。

Answer 2

angular的一个"特点"似乎是它不会添加.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