angularjs - 如何防止 ngAnimate 和 ngClass 之间的冲突破坏 DOM？

Question

我刚刚开始使用 ngAnimate 库 (1.2.13)，当我将 ngRepeat 指令与 ngClass 结合使用时，它破坏了我的 DOM。当 ngClass 添加或删除触发未使用 ngAnimate 类定义的现有转换的类时，似乎存在冲突。

我已在以下 Plunker 中复制了该行为:http://plnkr.co/edit/iw5st35cqp1GQeCxMhjj当您单击其中一个元素时，它们就会获得焦点。类 dm-focused 被添加到具有 ngClass 的元素中，并触发高度转换。当焦点元素被删除时，它应该从列表中消失，但它却出现故障并卡在焦点状态。

我能想到的唯一解决方案是将所有遭受此故障的现有类的每个 ngAnimate 类设置为 transition: none。但是如果我确实想同时使用 ngClass 和 ngAnimate 的过渡该怎么办？我还必须检查所有应用程序并添加不必要的样式，以防止出现这种不需要的行为。

Answer 1

认为最好的解决方案是仅将类用于某些特定操作 - 而不是动画。

在任何情况下，您都可以禁用元素的动画

在 js 中:

app.directive('disableAnimate', ['$animate', function ($animate) {
    return {
        restrict: 'A',
        link: function (scope, element) {
            $animate.enabled(false, element);
        }
    };
} ]);

在 html 中:

<div disable-animate><!-- your structure --></div>