angularjs - 急于中断ngAnimate的CSS过渡在Chrome上的运行

我注意到，加载了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:

不含ngAnimate的http://plnkr.co/edit/Fhwbd3WRiz5wHRIm10y3?p=preview
带ngAnimate的http://plnkr.co/edit/WSED064MV2dtPnsEQuti?p=preview

如果您尝试在前面的示例中的红色框中快速单击多次，则应该明白我的意思，或者单击下面的按钮以查看截屏。



除了不加载ngAnimate之外，还有什么方法可以避免这种情况，那么从当前显示的值/位置开始中断动画？

编辑:初始链接不正确。此外，在Chrome浏览器中观察到了这种生涩的行为，但在Firefox中却没有。
编辑:重新设计问题以使其更清楚，这是Chrome/Firefox的不同之处

最佳答案

我注意到动画发生时，样式设置为:

transition: none;
-webkit-transition: none;

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

因此，要解决您的问题，只需将属性设置为!important即可确保忽略这些属性:

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

可以在plnkr here中看到哪些工作

关于angularjs - 急于中断ngAnimate的CSS过渡在Chrome上的运行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23156284/