AngularJS ng-show动画在数据上触发.$resolved.

Question

使用 ngAnimate，我想对一个仅在解析$resource返回数据时显示的元素进行动画处理。到目前为止，我已经尝试过：

<h3 ng-show="data.$resolved" class="animate-show">My Devices: {{deviceList.length}}</h3>

但是，在解析数据时，该元素会弹出到视图中，而不是淡入。

如果我像下面这样更改标记，我可以通过切换复选框来淡化元素。

<h3 ng-show="showMe" class="animate-show">My Devices: {{deviceList.length}}</h3>
  <input type="checkbox" ng-model="showMe"/>

可能是什么问题？

Answer 1

我在动画方面遇到了完全相同的问题。我所做的是：

当我得到数据时，我使用$timeout将节目延迟到下一个周期

data.$promise.then(function() {
    $timeout(function () { $scope.showMe = true; }, 0);
});

这样浏览器就有时间渲染动画。我不知道它到底是什么，但我的猜测是 Angular 保留了一个脏循环来检查更改（是的，它的作用），以便可以尽快触发与视图的绑定。因此，延迟到下一个周期会给浏览器留下一些动画时间。

普伦克链接