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

【问题标题】：How to prevent conflicts between ngAnimate and ngClass from breaking the DOM?如何防止 ngAnimate 和 ngClass 之间的冲突破坏 DOM？
【发布时间】：2014-05-28 02:27:51
【问题描述】：

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

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

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

【问题讨论】：

标签： angularjs css-transitions ng-animate ng-class

【解决方案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>

【讨论】：