Question

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

我已经复制了以下Plunker中的行为：http://plnkr.co/edit/iw5st35cqp1GQeCxMhjj 当您单击其中一个元素时，它们会得到关注。使用ngClass将类dm-focused添加到元素中并触发高度转换。当聚焦元素被移除时，它应该从列表中消失，但它会出现故障并且处于聚焦状态。

我能想出的唯一解决方案是将所有现有类的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>

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

1 个答案: