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

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

我在以下Plunker中复制了这种行为： 当你点击其中一个元素时，它们就会聚焦。类

dm focused

被添加到具有ngClass的元素中，并触发高度转换。当焦点元素被移除时，它应该会从列表中消失，但它会出现小故障并停留在焦点状态

我能想到的唯一解决方案是，对于存在此问题的所有现有类，将每个ngAnimate类都设置为

transition:none

。

---

但是如果我真的想同时使用ngClass和ngAnimate的转换呢？我还必须检查我的所有应用程序并添加不必要的样式，以防止这种不必要的行为。

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

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

在js中：

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

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

在html中：

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

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