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

在几种情况下，我将Angular与ngAnimate一起使用。在另一个示例中，我有一条指令可以更改列的宽度(使用Bootstrap col-md-*类)和一个简单的过渡，如下所示:

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

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

我可以禁用对普通CSS过渡所做的ngAnimate吗？我在这里可以解决这个问题？快把我逼疯。

Here is a fiddle演示了该问题。请参阅注释以获取复制说明。

最佳答案

注意:我使用了当前最新版本(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

关于css - Angular ngAnimate导致宽度动画跳跃，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20810791/