css - Angular ngAnimate 导致宽度动画跳跃

Question

在一些情况下，我将 Angular 与 ngAnimate 结合使用。在另一个例子中，我有一个改变列宽的指令(使用 Bootstrap col-md-* 类)和一个简单的过渡，看起来像这样:

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

我在这里并没有明确地使用 ngAnimate，但仅仅因为被包含在内肯定让我感到悲伤。基本上，过渡会在过渡到新宽度之前跳到零。如果我从我的模块中删除 ngAnimate，转换会很平滑，但我需要 ngAnimate 来实现我应用中的其他功能。

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

Here is a fiddle证明问题。请参阅评论以获取重现说明。

Answer 1

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

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

https://github.com/angular/angular.js/blob/master/src/ngAnimate/animate.js#L1099

如果您注释上面链接的行(“blockTransitions”函数体的单行)，问题就解决了。

因为我不知道这是否是一个合适的解决方案(可能不是)，我刚刚创建了一个 PR 以便他们可以正确地解决这个问题:

https://github.com/angular/angular.js/pull/5552

---

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

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

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

此处正则表达式的解释:https://stackoverflow.com/a/406408/370290