Question

将“Notes”列表加载到名为notes的范围数组中时，我有一个有角度的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完成其工作的时间。或者也许有一个我没有考虑过的非常明显和干净的解决方案。

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

1 个答案: