ipad safari中的jquery css动画不流畅

Question

使用 jquery animate 在 ipad Safari 中不会出现平滑动画$('#myId').css({ 'left': '-100%' }).animate({ 'left': '0' }, 300, 'linear');我也尝试了添加类选项，在该类过渡中提供了 css 过渡：左 2s 轻松；有什么方法可以使用 jquery 或 css 提供流畅的动画，使其与 google chrome 中的工作一样。我承认会有一些因素，包括硬件性能和网络速度。

Answer 1

该left属性在动画时不使用硬件加速，因此无论它是在您的样式表中还是与 JS 一起应用，它都会出现问题。

您最好使用translateX()inside a transform，它确实使用硬件加速来执行动画。

transform: translateX(-100%);

Answer 2

我的建议是使用 css 过渡。过渡动画可能是这样的：

#myId {

  width: 100px;

  height: 100px;

  left: 0;

  top: 0;

  background: red;

  position: relative;

  display:block;

}

#myId:hover {

  transition: left 3s linear;

  left: 500px;

}

<div id="myId"></div>

例如，要了解有关 css 转换的更多信息，请访问https://www.w3schools.com/css/css3_transitions.asp。:)