AngularJS动画ng开关ng重复

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

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

• 我定义了一个作用域变量

  state

  ，在控制器中初始化为

  加载

  ，当我从HTTP请求接收数据时，将其更改为

  加载

• 我使用接收到的数据初始化范围变量

  items

• 在我看来，我对状态使用

  ng开关

  ，对项目使用

  ng重复

• 我使用css在

  ng repeat

  上定义动画

这里是（用$timeout代替请求）

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

---

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

之所以会发生这种情况，是因为您的

在

时出错。如果使用

ng-if

，同样的情况也会发生，但是如果使用

ng-show

，效果会很好

问题在于，当您的

ng when

条件返回true时，

ng when

第一次将其内容呈现在已删除的dom中（因此不会发生动画）。然后将此dom附加到dom树（此步骤已设置动画，但您必须将动画类放在ng上）

当使用诸如

ngshow

或

nghide

之类的东西时，事情会按预期工作，因为dom总是附加的（它只是显示/隐藏）

这可能被认为是一个bug或ng animate的一个限制，您可能想发布一个github问题，看看angular的家伙们是否有任何想法。

这似乎是angular的一个“功能”，它不会添加

。ng输入
在
块时重复
ng开关中的项目。当=“loaded”
时，您可以移除
ng开关，它将工作（您并不真正需要它，因为如果没有项目，
ng repeat
将不会执行任何操作）


请稍候


{{item}}


首先，感谢您的快速回答。我已经试过了，它和这个例子配合得很好。问题是我的网站更复杂，因为我的示例只是为了清晰起见。它不仅包含一个
ng repeat
，还包含封装在
ng switch=“loaded”
中的其他内容，并且在加载数据时无法显示它。谢谢您的回答。我也尝试过使用
ng show
，然后发现它与dom有关，因为它正在使用此指令，所以再次感谢您的明确解释。正如我在对上一个答案的评论中所说，我的网站比我的例子更复杂。即使我可以使用
ng hide
/
ng show
，您认为这是我打算做的事情的最佳实践吗？ng show的性能通常会较低，因为即使内容被隐藏，dom中的所有手表仍将在每个$digest（）周期进行处理，但这可能非常好（如果你的页面只是显示加载……）无论如何都不会发生，所以在加载完成之前，手表不会被触发，在这一点上，你希望它们被触发。如果你隐藏一组不同的DOM树，并且每次只显示一个DOM树，那就更是一个问题。然后你应该考虑更好的解决方案，比如路由。
<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>