angularjs - Jerky 在 Chrome 上使用 ngAnimate 中断了 CSS 转换

Question

我注意到使用 ngAnimate 加载的 CSS 过渡在 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 是否已加载，快速连续多次点击的行为不同:

http://plnkr.co/edit/Fhwbd3WRiz5wHRIm10y3?p=preview没有 ngAnimate 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 中可以看到它在工作