1

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

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

  • 我在控制器中定义了一个范围变量state，当我从 HTTP 请求接收到数据时，我会更改为它。loadingloaded
  • items我用接收到的数据初始化一个范围变量。
  • 在我看来，我ng-switch用于状态和ng-repeat项目。
  • 我用 css on 定义了一个动画ng-repeat。

这是一个 plunkr（使用 $timeout 而不是 request ）。

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

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

4

2 回答 2

1

它似乎是 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

于 2013-11-29T21:51:42.053 回答
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 问题，看看有角的家伙是否有任何想法。

于 2013-11-29T21:21:52.080 回答