过滤 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 服务注入到您的控制器中，然后您为单击选项卡而进行的任何回调都应首先调用$animate.enabled(false)。这将禁用动画。然后在页面刷新后调用$animate.enabled(true)。知道何时再次启用动画可能是棘手的部分。最简单的做法是使用$timeout 禁用动画半秒左右。如果你不喜欢这样，有一些博客文章是关于在ngRepeat 完成其工作时进行锻炼的。或者也许有一个我没有考虑过的非常明显和干净的解决方案。