javascript - 过滤ng-repeat时停止AngularJS中的动画

Question

当我将“Notes”列表加载到名为 notes 的范围数组中时，我有一个 Angular Web 应用程序。

此列表在 ng-repeat 中进行过滤，如下所示:

<div class="noteClass" ng-repeat="n in notes | propertyFilter: 'Fields.noteTabNumber' : selectedTab">

这一切都工作正常，并且我在 CSS 文件中添加了一些 CSS 动画，以便当将新项目添加到 notes 数组中时，它会以动画方式进入场景。

div.noteClass.ng-enter,
div.noteClass.ng-leave,
div.noteClass.ng-move {
    //my animations here
}

div.noteClass.ng-enter,
div.noteClass.ng-move
 {
    //my further animation functions
}

div.noteClass.ng-enter.ng-enter-active,
div.noteClass.ng-move.ng-move-active {
    /// finished animations
}

我的问题与过滤器有关，如您所见，列表是使用名为 propertyFitler 的自定义过滤器进行过滤的，该过滤器根据用户选择的“选项卡”来过滤注释。

这是一个简单的UL:

<ul>
    <li ng-class="{selected: selectedTab==1}">...</li>
    <li ng-class="{selected: selectedTab==2}">...</li>
    <li ng-class="{selected: selectedTab==3}">...</li>
</ul>

当用户单击不同的选项卡时，项目的动画就会触发，而不是简单地立即过滤列表。

如何将新项目动画化到列表中，但当用户通过 LI 项目过滤列表时，不要动画化列表中的更改？

Answer 1

您可以将 $animate 服务注入(inject)到 Controller 中，然后无论您单击选项卡时使用什么回调，都应首先调用 $animate.enabled(false)。这将禁用动画。然后，页面刷新后只需调用 $animate.enabled(true) 即可。知道何时再次启用动画可能是棘手的部分。最简单的方法就是使用 $timeout 禁用动画半秒左右。如果您不喜欢这样，可以阅读一些关于计算 ngRepeat 何时完成其工作的博客文章。或者也许有一个我没有考虑过的非常明显和干净的解决方案。