Question

我正在尝试做一个看似简单过程的事情：显示从带动画的HTTP请求收到的项目列表。

首先，这是我的做法（我愿意以更好的角度方式做任何建议）：

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

这是a plunkr（使用$ timeout而不是请求）。

我无法理解为什么动画不起作用。

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

Answer 1

发生这种情况的原因是因为您ng-when。 ng-if也会发生同样的事情，但如果使用ng-show则可以正常工作。

问题在于，当您的ng-when条件返回true时，ng-when首先会在已分离的dom中呈现它的内容（因此动画不会发生）。然后将此dom附加到dom树（此步骤已设置动画，但您必须将动画类放在ng-when上）。

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

这可能被视为错误或限制ng-animate，你可能想发布一个github问题，看看有角度的人是否有任何想法。

Answer 2

似乎是角度的“特征”，它不会添加.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

AngularJS动画ng-switch ng-repeat

2 个答案: