Angular ngAnimate 导致宽度动画跳跃答案

【问题标题】：Angular ngAnimate causes width animations to jumpAngular ngAnimate 导致宽度动画跳跃
【发布时间】：2013-12-28 13:31:23
【问题描述】：

我在几个案例中使用 Angular 和 ngAnimate。在另一个中，我有一个指令正在改变列的宽度（使用 Bootstrap col-md-* 类）和一个看起来像这样的简单转换：

.column-view .column {
  transition: width 1s;
}

我在这里没有明确使用ngAnimate，但它肯定让我因为被包括在内而感到悲伤。基本上，过渡会在过渡到新宽度之前跳到零。如果我从我的模块中删除 ngAnimate，过渡会很顺利，但我需要 ngAnimate 才能在我的应用程序中使用其他功能。

我可以禁用 ngAnimate 对我的纯 CSS 过渡所做的任何事情吗？我可以在这里做些什么来解决这个问题？快把我逼疯了。

Here is a fiddle 演示问题。有关重现的说明，请参阅 cmets。

【问题讨论】：

我在玩你原来的 Fiddle，我发现，升级到 AngularJS 1.2.6，“动画”既不流畅也不时髦……它只是从头到尾直接切换状态。见：jsfiddle.net/YUTT2
与最新 Fiddle 的行为相同，更新到 AngularJS 1.2.6：jsfiddle.net/2fnhr/2
使用未记录的 classNameFilter 的 AngularJS 1.2.6 的解决方法：jsfiddle.net/2fnhr/3

【解决方案1】：

注意：我使用当前最新版本 (AngularJS 1.2.6) 来调查您的问题。

我发现在内部调用了一个“blockTransitions”函数，它就是这样做的：它会阻止转换。

如果注释上面链接的那一行（“blockTransitions”函数体的单行），问题就解决了。

由于我无法判断这是否是一个正确的解决方案（可能不是），我刚刚创建了一个 PR，以便他们可以正确解决问题：

同样使用最新版本，有一个解决方法：http://jsfiddle.net/2fnhr/3/

app.config(function($animateProvider){
  $animateProvider.classNameFilter(/^((?!col-md).)*$/);
});

这只会对名称中不包含“col-md”的类应用 ngAnimate 内容，从而关闭相关 Bootstrap 类的 ngAnimate。

【讨论】：