在angularjs中过滤ng-repeat时停止动画

Question

我有一个angular web应用程序，它将一个"Notes"列表加载到一个名为notes的作用域数组中。

该列表在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何时完成工作的博客文章。或者也许有一个我没有考虑过的非常明显和干净的解决方案。