Jerky在Chrome上使用ngAnimate中断了CSS过渡

Question

我注意到，加载ngAnimate的CSS转换是＆＃34;生涩＆＃34;在Chrome上被另一个转换中断时。也就是说，它们似乎跳到目标状态，而不是从当前值开始。如果没有加载ngAnimate，完全相同的过渡会更加平滑，并且在带有/不带有ngAnimate的Firefox上更平滑。

例如，在点击时添加/删除类的简单元素：

<bigger-on-click-class class="{{showBigger ? 'bigger' : ''}}" ng-click="showBigger = !showBigger"></bigger-on-click-class>

通过CSS过渡动画：

bigger-on-click-class {
  display: block;
  height: 200px;
  width: 200px;
  background: red;
  -webkit-transition: height 5s;
  transition: height 5s;
}

bigger-on-click-class.bigger {
  height: 400px;
}

在快速连续的多次点击中表现不同，具体取决于是否加载ngAnimate：

没有ngAnimate的

http://plnkr.co/edit/Fhwbd3WRiz5wHRIm10y3?p=preview http://plnkr.co/edit/WSED064MV2dtPnsEQuti?p=preview与ngAnimate

如果您尝试在前面示例中的红色框上多次快速单击，您应该看到我的意思，或者点击下方查看截屏视频。

除了不加载ngAnimate之外，有没有办法避免这种情况，因此中断动画从当前显示的值/位置开始？

编辑：初始链接不正确。此外，在Chrome中观察到不稳定的行为，但在Firefox中没有观察到。 编辑：重新定义问题，使其更清晰，这是Chrome / Firefox的差异

Answer 1

我注意到当动画发生时，样式被设置为：

transition: none;
-webkit-transition: none;

我假设ngAnimate在处理过程中设置了这些样式属性，其他浏览器在设置的短暂时间内不受它们的影响，但是当chrome看到它们时，它会立即完成动画，就好像没有应用过渡一样。

因此，要解决您的问题，只需将属性设置为！important：

即可确保忽略这些属性

transition: height 5s !important;
-webkit-transition: height 5s !important;

可以看到在plnkr here

中工作

Answer 2

避免急躁的一种方法：升级到Angular 1.3。引用Angular 1.3 beta 7 ngAnimate docs

  

早期版本的ngAnimate可能导致自然CSS转换中断并且无法正确呈现，因为$ animate暂时阻止转换使用0s无

差异可以在我的Plunker using Angular 1.3 beta 7

中看到

Answer 3

在我的情况下，问题是因为ng-hide css类设置为display：none并且动画在chrome中不起作用，但它在safari中有效。