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

【问题标题】：Jerky interrupted CSS transitions with ngAnimate on ChromeJerky 在 Chrome 上使用 ngAnimate 中断了 CSS 过渡
【发布时间】：2014-06-03 02:10:56
【问题描述】：

我注意到，使用 ngAnimate 加载的 CSS 过渡在 Chrome 上被另一个过渡打断时会“生涩”。也就是说，它们似乎是向前跳转到目标状态，而不是从当前值开始。完全相同的过渡在没有加载 ngAnimate 的情况下会更加平滑，在 Firefox 上使用/不使用 ngAnimate 时更流畅。

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

<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 的区别

【问题讨论】：

你用的是什么设备？
我在 Mac 上使用 Chrome。
我没看到。我正在使用 Chrome/Mac。
您是否尝试过在类属性中使用 ng-class="{'bigger': showBigger}" 而不是文本绑定？
我刚刚意识到：我不小心两次发布了同一个 Plunkr。其中一个不应该加载 ngAnimate，另一个应该。可以在一个小时左右编辑它（或者其他人，请随意......）

标签： angularjs css google-chrome css-transitions ng-animate

【解决方案1】：

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

transition: none;
-webkit-transition: none;

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

因此，要解决您的问题，您只需通过将属性设置为 !important 来确保忽略这些属性：

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

在plnkr here中可以看到工作

【讨论】：

谢谢！尽管将过渡设置为无似乎是一件很刻意的事情。你知道为什么会这样，或者在转换上设置 !important 以覆盖它会产生什么后果？
你说得很好。我查看了源代码，看不出他们这样做的任何明显原因。也许他们只是想确保每个动画总是从头开始。我无法想象在过渡中设置 !important 会产生任何有意义的后果。如果这是一个问题，你总是可以使用动画而不是过渡。

【解决方案2】：

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

早期版本的 ngAnimate 可能会导致自然 CSS 过渡中断并且由于 $animate 使用 0s none 临时阻止过渡而无法正确呈现

而区别可以看我的Plunker using Angular 1.3 beta 7

【讨论】：

这是一个更好的答案，因为 Angular 1.3 的旧 beta 版本不仅会导致生涩的动画，而且在某些情况下还会导致一些奇怪的绘制问题。

【解决方案3】：

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

【讨论】：