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

Question

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

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

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

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

这是一个演示问题的小提琴。有关重现的说明，请参阅评论。

score 9 · Accepted Answer

注意：我使用当前最新版本（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。

1 回答 1