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 {&nbsp; width: 100px;&nbsp; height: 100px;&nbsp; left: 0;&nbsp; top: 0;&nbsp; background: red;&nbsp; position: relative;&nbsp; display:block;}#myId:hover {&nbsp; transition: left 3s linear;&nbsp; left: 500px;}<div id="myId"></div>例如，要了解有关 css 转换的更多信息，请访问https://www.w3schools.com/css/css3_transitions.asp。:)