ios - 具有 css 动画的 iO 上的性能问题

Question

我有一个包含 div 的 html 页面，当通过在 bottom 属性上使用 css transition 单击按钮时，该 div 正在移动。 (底部值的更改由 jQuery 完成)这在所有浏览器(包括 iPad 上的 iOS)中都可以正常工作。现在我正在开发第二个页面，它必须做同样的事情。我复制了所有 css 属性和 jQuery 函数，但是当 div 移入时，iOS 上总是出现断断续续的动画(仅在 iOS 上!!)。

我已经尝试过以下解决方案:

-webkit-transform: translate3d(0, 0, 0);

或

-webkit-transform: translateZ(0);

没有什么比我(我认为)完全具有相同代码的其他页面更能使动画流畅。

现在我不知道为什么会有差异以及如何解决这个问题。有没有人已经遇到过类似的问题并且可以给我一些有用的建议？

完整代码 CSS:

.animationTestObject {
   width: 100px;
   height: 100px;
   background-color: black;
   position: fixed;
   left: 100px;
   bottom: -100px;
   transition: bottom 500ms;
   -webkit-transition: bottom 500ms;
   transform: translate3d(0, 0, 0);
   -webkit-transform: translate3d(0, 0, 0);
}

JS:

function startAnimation() {
   $(".animationTestObject").css('bottom', '100px');
}

Answer 1

为了在动画时获得更好的性能，尽量避免 css properties that trigger a relayout (标有紫色标签的)。

在您的情况下，您应该为 transform: translate 属性设置动画:

.animationTestObject {
    width: 100px;
    height: 100px;
    position: fixed;
    left: 100px;
    bottom: -100px;
    transition: transform 500ms ease;
    transform: translate3d(0, 0, 0);
}

function startAnimation() {
    $('.animationTestObject').css('transform', 'translate(0, -100px)');
}