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

Question

我注意到,ngAnimate当Chrome被另一个转换中断时,加载的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看到它们时,它会立即完成动画,就好像没有应用任何转换一样.

因此,要解决您的问题,您只需要通过将属性设置为"重要"来确保忽略这些属性:

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

在这里可以看到在plnkr工作