Question

我最近遇到过一些关于CSS动画的奇怪行为，以及在操作DOM时无法更新元素位置。我已经采取了一些说明这一点的GIF：

在Chrome（http://recordit.co/cCim1IwyMc）中，当在DOM中更新var table = $('#example').DataTable({ 'createdRow': function(row, data, dataIndex){ $('td:eq(3)', row).css('min-width', '200px'); } });时，浏览器将按照您的预期更新元素的动画位置。

在Safari（http://recordit.co/3DRmEdo0FC）中，当在DOM中更新animation-delay时，浏览器无法更新元素的动画位置。

这对我来说似乎是一个回流/重绘的问题。我还注意到，当您将鼠标悬停在Safari检查器中的动画元素上时，蓝色叠加层也无法跟上动画。

以下是代码：http://codepen.io/jabes/pen/pNgRrg

Answer 1

我最近偶然发现了关于safari和css3动画的类似问题，似乎safari在使用速记模式定义动画时会覆盖单个动画属性。在我的情况下，它是动画播放状态，无法更改为safari，所以我必须立即应用整个动画字符串，而不是简单地设置动画播放状态：运行。

尝试：

.animator {
  width: calc(100% - 100px);
  animation: slide 50s linear 1s forwards; /* animation-delay 1s */
}

延迟发生在定时功能之后。

Safari中的CSS动画延迟错误

1 个答案: